@editora/anchor
Advanced tools
+21
| MIT License | ||
| Copyright (c) 2026 Ajay Kumar | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. |
+51
| # @editora/anchor | ||
| [](https://www.npmjs.com/package/@editora/anchor) | ||
| [](https://github.com/ajaykr089/Editora/blob/main/LICENSE) | ||
| [](https://www.typescriptlang.org/) | ||
| [](https://bundlephobia.com/package/@editora/anchor) | ||
| > [!IMPORTANT] | ||
| > **Live Website:** https://editora-ecosystem.netlify.app/ | ||
| > **Storybook:** https://editora-ecosystem-storybook.netlify.app/ | ||
| Anchor plugin for Editora rich text editor. | ||
| ## What It Does | ||
| - Inserts named anchor targets in editor content. | ||
| - Provides an insertion dialog to define anchor IDs. | ||
| - Supports keyboard shortcut for quick insertion. | ||
| - Renders visual anchor markers while editing. | ||
| ## Installation | ||
| ```bash | ||
| npm install @editora/anchor | ||
| ``` | ||
| Or bundle install: | ||
| ```bash | ||
| npm install @editora/plugins | ||
| ``` | ||
| ## Usage | ||
| ```ts | ||
| import { AnchorPlugin } from "@editora/anchor"; | ||
| const plugins = [AnchorPlugin()]; | ||
| ``` | ||
| ## Toolbar Command and Shortcut | ||
| - Command: `insertAnchor` | ||
| - Toolbar label: `Anchor` | ||
| - Shortcut: `Mod-Shift-k` | ||
| ## Notes | ||
| - Public package entry exports `AnchorPlugin`. | ||
| - Use together with link support when you need in-document navigation. |
+10
-5
| { | ||
| "name": "@editora/anchor", | ||
| "version": "1.0.3", | ||
| "version": "1.0.4", | ||
| "description": "Anchor plugin for Rich Text Editor - Create named navigation targets", | ||
@@ -21,5 +21,10 @@ "main": "dist/index.cjs.js", | ||
| ], | ||
| "homepage": "https://editora-ecosystem.netlify.app/", | ||
| "bugs": { | ||
| "url": "https://github.com/ajaykr089/Editora/issues" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/ajaykr089/Editora.git" | ||
| "url": "https://github.com/ajaykr089/Editora.git", | ||
| "directory": "packages/plugins/anchor" | ||
| }, | ||
@@ -29,3 +34,3 @@ "author": "", | ||
| "peerDependenciesMeta": { | ||
| "editora-toast": { | ||
| "@editora/toast": { | ||
| "optional": true | ||
@@ -35,4 +40,4 @@ } | ||
| "dependencies": { | ||
| "@editora/core": "^1.0.6", | ||
| "@editora/toast": "^2.0.3" | ||
| "@editora/core": "^1.0.14", | ||
| "@editora/toast": "^2.0.7" | ||
| }, | ||
@@ -39,0 +44,0 @@ "devDependencies": { |
@@ -31,2 +31,13 @@ import type { Plugin } from '@editora/core'; | ||
| function recordDomHistoryTransaction(editor: HTMLElement, beforeHTML: string): void { | ||
| if (beforeHTML === editor.innerHTML) return; | ||
| const executor = (window as any).execEditorCommand || (window as any).executeEditorCommand; | ||
| if (typeof executor !== 'function') return; | ||
| try { | ||
| executor('recordDomTransaction', editor, beforeHTML, editor.innerHTML); | ||
| } catch { | ||
| // History plugin may be unavailable. | ||
| } | ||
| } | ||
| /** | ||
@@ -555,2 +566,16 @@ * Initialize mutation observer to track anchor deletions | ||
| let historyEditor: HTMLElement | null = null; | ||
| let ancestor: Node | null = range.startContainer; | ||
| while (ancestor && ancestor !== document.body) { | ||
| if (ancestor.nodeType === Node.ELEMENT_NODE) { | ||
| const el = ancestor as HTMLElement; | ||
| if (el.getAttribute('contenteditable') === 'true') { | ||
| historyEditor = el; | ||
| break; | ||
| } | ||
| } | ||
| ancestor = ancestor.parentNode; | ||
| } | ||
| const beforeHTML = historyEditor?.innerHTML ?? ''; | ||
| // Create anchor element | ||
@@ -583,8 +608,13 @@ const anchor = document.createElement('span'); | ||
| // Trigger input event to update editor state | ||
| const editorContainer = findEditorContainerFromSelection(); | ||
| if (editorContainer) { | ||
| const contentElement = getContentElement(editorContainer); | ||
| if (contentElement) { | ||
| contentElement.dispatchEvent(new Event('input', { bubbles: true })); | ||
| // Trigger history + input event to update editor state | ||
| if (historyEditor) { | ||
| recordDomHistoryTransaction(historyEditor, beforeHTML); | ||
| historyEditor.dispatchEvent(new Event('input', { bubbles: true })); | ||
| } else { | ||
| const editorContainer = findEditorContainerFromSelection(); | ||
| if (editorContainer) { | ||
| const contentElement = getContentElement(editorContainer); | ||
| if (contentElement) { | ||
| contentElement.dispatchEvent(new Event('input', { bubbles: true })); | ||
| } | ||
| } | ||
@@ -591,0 +621,0 @@ } |
No README
QualityPackage does not have a README. This may indicate a failed publish or a low quality package.
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
No website
QualityPackage does not have a website.
55654
7.06%8
33.33%1389
2.06%1
-50%1
-50%0
-100%52
Infinity%Updated
Updated