{"id":13774044,"url":"https://github.com/eissasoubhi/summernote-heading","last_synced_at":"2025-09-14T17:47:57.110Z","repository":{"id":57689435,"uuid":"487019235","full_name":"eissasoubhi/summernote-heading","owner":"eissasoubhi","description":"Summernote heading module, adds a customized heading component to summernote.","archived":false,"fork":false,"pushed_at":"2023-02-24T13:52:00.000Z","size":8031,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-11T01:56:53.510Z","etag":null,"topics":["extension","heading","plugin","summernote","title"],"latest_commit_sha":null,"homepage":"https://eissasoubhi.github.io/summernote-heading/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eissasoubhi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-04-29T15:20:25.000Z","updated_at":"2022-05-22T15:50:40.000Z","dependencies_parsed_at":"2024-01-13T11:52:35.653Z","dependency_job_id":"3482fd6a-beb8-4fe9-9749-484b9b480198","html_url":"https://github.com/eissasoubhi/summernote-heading","commit_stats":{"total_commits":34,"total_committers":2,"mean_commits":17.0,"dds":0.3529411764705882,"last_synced_commit":"0ab7c6c7f3dd57a529d1daa0514f53ed5c5b8e98"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/eissasoubhi/summernote-heading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-heading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-heading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-heading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-heading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eissasoubhi","download_url":"https://codeload.github.com/eissasoubhi/summernote-heading/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eissasoubhi%2Fsummernote-heading/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275143585,"owners_count":25413091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-14T02:00:10.474Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["extension","heading","plugin","summernote","title"],"created_at":"2024-08-03T17:01:23.175Z","updated_at":"2025-09-14T17:47:57.067Z","avatar_url":"https://github.com/eissasoubhi.png","language":"TypeScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Insert"],"readme":"\n\n# Summernote heading\nsummernote-heading extension/plugin/module for [summernote](https://github.com/summernote/summernote/) WYSIWYG, provides a bootstrap modal to add custom heading to the summernote editor.\n\n### Dependencies:\nFont-awesome: 4.7\u003cbr\u003e\nJQuery: 3\u003cbr\u003e\nBootstrap version: 4\u003cbr\u003e\nSummernote version: 0.8\u003cbr\u003e\n\n### More summernote extensions (SNB bricks)\n - [Summernote Gallery](https://github.com/eissasoubhi/summernote-gallery)\n\n**For a complete module with more user-friendly components. see [Summernote bricks](https://github.com/eissasoubhi/summernote-bricks)**\n\n# Demo\n\nDemo link:\nhttp://eissasoubhi.github.io/summernote-heading \u003cbr\u003e\u003cbr\u003e\n\n![Summernote heading demo](demo.gif?raw=true \"Summernote heading demo\")\n\n# Installing\n- Include the required files, and the module file after summernote-bs4.min.js file\n\n```html\n\u003clink href=\"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css\" rel=\"stylesheet\" \u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css\"\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css\" rel=\"stylesheet\"\u003e\n\n\u003c!-- summernote-heading style--\u003e\n\u003clink rel=\"stylesheet\" href=\"summernote-bricks.css\"\u003e\n\n\u003cdiv style=\"background-color: #FFF\"\u003e\n    \u003cdiv id=\"summernote\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript src=\"https://code.jquery.com/jquery-3.5.1.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- summernote-heading --\u003e\n\u003cscript src=\"dist/summernote-heading.min.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n```\n- Add the heading to the summernote editor toolbar\n\n```javascript\n$('#summernote').summernote({\n        toolbar: [\n            // ['insert', ['picture', 'link', 'video', 'table', 'hr', 'summernoteHeading']],\n            // ['font style', ['fontname', 'fontsize', 'color', 'bold', 'italic', \n            //'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],\n            // ['paragraph style', ['style', 'ol', 'ul', 'paragraph', 'height']],\n            // ['misc', ['fullscreen', 'codeview', 'undo', 'redo', 'help']]\n            ['extensions', ['summernoteHeading']],\n        ],\n        summernoteHeading: {\n            modal: {\n                // modal title\n                title: 'Summernote Heading title',\n\n                // close button text\n                closeText: 'Close',\n\n                // save button text\n                saveText: 'Save',\n\n                // title input label text\n                titleLabel: 'Heading title',\n\n                // title input label text\n                subtitleLabel: 'Heading subtitle',\n\n                // the html element class containing the modal messages\n                messageContainerClass: 'snb-modal-message',\n\n                // the default value of the underline color input\n                defaultUnderlineColor: '#c50000',\n\n                // the text of the label of the underline color input\n                underlineColorLabel: 'Underline color',\n\n                // modal inputs validations\n                validations: {\n                    \"title\": [\"required\"],\n                    \"subtitle\": [\"required\"]\n                },\n            },\n\n            buttonLabel: '\u003ci class=\"fa fa-header\"\u003e\u003c/i\u003e SNB Heading',\n\n            tooltip: 'Summernote Heading',\n\n            extensions: [\n                // add/remove linebreaks extension\n                'snbWhiteSpaceManager'\n            ]\n        }\n    });\n```\n\n# Options\n\nThe module has general options and modal options.\u003cbr\u003e\nThe `modal` option has sub-options that deal with the bootstrap modal.\u003cbr\u003e\n\n| Option                      | Description                                                                            | Default                                 | Type                                                            |\n|-----------------------------|----------------------------------------------------------------------------------------|-----------------------------------------|-----------------------------------------------------------------|\n| buttonLabel                 | the plugin button label displayed on the summernote toolbar                            | \u003ci class=\"fa fa-header\"\u003e\u003c/i\u003e SN Heading | string                                                          |\n| tooltip                     | the plugin button tooltip visible on the button hover event                            | Summernote Heading                      | string                                                          |\n| extensions                  | extension to add extra features to the brick (see the SNB-extension section)           | ['snbWhiteSpaceManager']                | array                                                           |\n| **modal**                   | The modal options                                                                      | -                                       | object: `src/Module/Interfaces/HeadingModalOptionsInterface.ts` |\n| modal.title                 | The modal title                                                                        | summernote heading title                | string                                                          |\n| modal.closeText             | the modal close button text                                                            | Close                                   | string                                                          |\n| modal.saveText              | the modal save button text                                                             | Save                                    | string                                                          |\n| modal.titleLabel            | the label text of the heading title input                                              | Heading title                           | string                                                          |\n| modal.subtitleLabel         | the label text of the heading subtitle input                                           | Heading subtitle                        | string                                                          |\n| modal.messageContainerClass | the class of the html element containing the modal messages                            | snb-modal-message                       | string                                                          |\n| modal.defaultUnderlineColor | the default color of the heading underline in hexa format                              | #c50000                                 | string                                                          |\n| modal.underlineColorLabel   | the label text of the underline color input                                            | Underline color                         | string                                                          |\n| **modal.validations**       | Validation of the modal/brick data: `src/Module/Interfaces/HeadingDataInterface.ts`    | -                                       | object                                                          |\n| modal.validations.title     | the validation rules of the `src/Module/Interfaces/HeadingDataInterface.ts` title      | [\"required\"]                            | array                                                           |\n| modal.validations.subtitle  | the validation rules of the  `src/Module/Interfaces/HeadingDataInterface.ts`  subtitle | [\"required\"]                            | array                                                           |\n\n# Deep dive || Edit\n\n**Requirements: node v16**\n\n### Dev environment setup\nTo run the plugin on local, head to the project root folder and run:\n1. `npm install`\n2. `npm run start` to start the project on 127.0.0.1:9091\n3. `npm run dev` to start the webpack watch mode\n4. Edit plugin files in the `/src` folder \n5. `npm run build` to generate the build in `/dist` folder\n\n### The source code\nThe module is coded with Typescript and JSX\n\nJSX is for writing single-file template files residing in `src/Module/templates`\n\nSome components of this code source are imported from the SNB-components package\n### How it works:\n\n```mermaid\nflowchart LR\n    subgraph Modal\n        direction TB\n\n        user_interaction(User interaction)\n        save(Save)\n        show_modal ==\u003e user_interaction\n        user_interaction ==\u003e |Parse user inputs|save\n        \n    end\n\n    subgraph Extension/plugin\n        direction LR\n        show_modal(Show modal)\n        create_brick(Create Brick)\n        mode_type{Mode?}\n        creating_mode(Creating Mode)\n        editing_mode(Editing Mode)\n        create_modal ==\u003e show_modal\n        save ==\u003e create_brick\n        save -. Modal data .-\u003e create_brick\n        create_brick ==\u003e mode_type\n        mode_type ==\u003e creating_mode\n        mode_type ==\u003e editing_mode\n    end\n\n    subgraph Editor\n        direction LR\n        seprator[_]\n        \n        style seprator stroke:#000,stroke-width:0px,color:#000,stroke-dasharray: 0\n        subgraph Toolbar\n            direction TB\n            create_modal(Create modal)\n            add_brick(Add Brick)\n            add_brick ==\u003e |Creating mode| create_modal\n            add_brick -. Empty data .-\u003e create_modal\n        end\n        subgraph Brick\n            direction TB\n            edit(Edit)\n            brick_content[(Brick ontent)]\n            edit ==\u003e |Editing mode| create_modal\n            edit -. Brick data .-\u003e create_modal\n            style Brick fill:#dc2269,stroke:#000,stroke-width:2px,color:#000,stroke-dasharray: 5 5\n            \n        end   \n        creating_mode ==\u003e |Insert Brick|Brick\n        editing_mode ==\u003e |Replace Brick|Brick\n    end\n```\n\n### SNB Extensions:\nSNB Extensions are a way to extract some reusable features to be included later (or not) by any Summernote-brick\n\nSee the available SNB extensions [here](https://github.com/eissasoubhi/SNB-components#extensions)\n\n### Contribution\nIf you found any bugs or have suggestions, don't hesitate to throw it in the issues sections.\n\nFor more understanding of how this module works take a look on the [v1](https://github.com/eissasoubhi/summernote-gallery/tree/v1) branch or the summernote extension basic sample [hello](https://github.com/summernote/summernote/blob/v0.7.0/examples/plugin-hello.html) .\n\n# License\nThe contents of this repository is licensed under [The MIT License.](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feissasoubhi%2Fsummernote-heading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feissasoubhi%2Fsummernote-heading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feissasoubhi%2Fsummernote-heading/lists"}