diff --git a/.changeset/button-block-fixes-and-polish.md b/.changeset/button-block-fixes-and-polish.md deleted file mode 100644 index ad94174..0000000 --- a/.changeset/button-block-fixes-and-polish.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -'@xproeditor/core': minor -'@xproeditor/vue': minor -'@xproeditor/react': minor ---- - -Add a new `button` block type (label, link URL, open-in-new-tab, primary/outline/ghost style, alignment) with a settings popover in both adapters and read-only rendering in `DocRenderer`. - -Add a standalone, categorized emoji picker (search, 7 categories, recents) usable both from the callout icon button and via a Slack/Discord-style `:` inline trigger that searches and inserts an emoji directly into text. - -Fix several real bugs surfaced while building the Bento showcase theme: -- Slash-menu arrow-key/Enter navigation was dead on arrival — the root keydown handler bailed out for any key typed inside the contenteditable block the menu lives in, which is the only place slash state ever exists. -- Floating UI (slash menu, bubble toolbar, popovers, dropdowns) is portaled to `document.body`, which silently escaped any theme class scoped to an ancestor of the editor — these now resync `--xpe-*` variables onto the portaled node so scoped custom themes apply everywhere, not just inline. -- The to-do checkbox's checkmark and the toggle chevron were sized via Tailwind utility classes that weren't reliably taking effect on raw SVGs — both now use explicit width/height so the checkmark is always visible. -- Vue's button-block label lost all styling because it reused `ui/Button.vue`'s scoped `.xpe-btn` class names on a plain `
` — Vue scoped CSS only applies to elements a component itself renders, so the classes were dead. Replaced with locally-scoped styles. - -Slash menu now groups items into Basic/Lists/Media/Advanced sections, locks page scroll while open (Notion-style), and flips above the caret when there's no room below. diff --git a/.changeset/context-menu-scrollbars-radius-color-fix.md b/.changeset/context-menu-scrollbars-radius-color-fix.md deleted file mode 100644 index 9826aa3..0000000 --- a/.changeset/context-menu-scrollbars-radius-color-fix.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -'@xproeditor/core': minor -'@xproeditor/vue': minor -'@xproeditor/react': minor ---- - -Add a right-click context menu on blocks (Notion-style): Duplicate, Delete, and — for callout blocks — a Color flyout with the existing background presets, all in a clean two-level menu with no extra clutter. - -Add slim, theme-token-driven custom scrollbars across every scrollable surface (popovers, dropdowns, the slash/emoji menus, tables, code blocks, the editor root, and the doc renderer) instead of the browser default — add the `.xpe-scroll` class to any other scrollable container you build to match. - -Soften corners across the whole popover/menu/button/input/callout/table/code family to scale off `--xpe-radius` instead of hardcoded pixel values, so a single token change now reshapes the entire editor consistently. - -Fix: the text/highlight color popover in the floating bubble toolbar could never actually be used — clicking a swatch immediately closed the panel. The panel's "stay open" effect compared the toolbar's position by object reference, and a same-range `selectionchange` event (fired by clicking inside the toolbar itself) always produces a fresh position object, so the panel closed itself before a color could register. Also fixed a malformed Tailwind class that left the "active color" checkmark badge invisible, and replaced a few remaining hardcoded indigo accents with theme tokens. diff --git a/.changeset/media-blocks-and-theming.md b/.changeset/media-blocks-and-theming.md deleted file mode 100644 index 8b3e1dd..0000000 --- a/.changeset/media-blocks-and-theming.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@xproeditor/core': minor -'@xproeditor/vue': minor -'@xproeditor/react': minor ---- - -Add `audio` and `file` block types with upload / library / URL insertion, per-file metadata (name, size, MIME), download card UI, and read-only rendering in `DocRenderer`. Media import now works out of the box without an `upload` prop (object-URL fallback), supports pasting files from the clipboard, and dropping OS files directly onto the editor at a precise position. Image blocks gain a paste-URL tab. Core exports new media helpers: `blockTypeForFile`, `formatFileSize`, `mediaPropsFromFile`, `fileToObjectUrl`, `acceptForBlockType`. diff --git a/.changeset/slash-menu-theming-rtl.md b/.changeset/slash-menu-theming-rtl.md deleted file mode 100644 index 8012e6d..0000000 --- a/.changeset/slash-menu-theming-rtl.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -'@xproeditor/vue': minor -'@xproeditor/react': minor ---- - -Slash-command menu now measures itself and positions precisely at the caret — flipping above when near the viewport bottom, clamping to the viewport edges, staying aligned in RTL, and showing a "No results" state instead of abruptly closing. Theming: a richer minimal token set (`--xpe-surface`, `--xpe-surface-hover`, `--xpe-primary-muted`, `--xpe-primary-foreground`, `--xpe-ring`, `--xpe-danger`, `--xpe-radius`, `--xpe-shadow`) plus a built-in dark theme via the `xpe-dark` class or `data-xpe-theme="dark"`; the slash menu, media blocks, and all editor chrome (toolbars, popovers, dropdown menus, inputs, tabs, table controls, gutter, text blocks) are fully token-driven, so the built-in dark theme and custom themes restyle the entire editor. Remaining physical CSS (left/right) converted to logical properties for correct RTL layout. diff --git a/examples/react-demo/package.json b/examples/react-demo/package.json index 566b555..8a170cd 100644 --- a/examples/react-demo/package.json +++ b/examples/react-demo/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@xproeditor/react": "0.1.0", + "@xproeditor/react": "0.2.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, diff --git a/examples/vue-demo/package.json b/examples/vue-demo/package.json index e74eb13..f276e4f 100644 --- a/examples/vue-demo/package.json +++ b/examples/vue-demo/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@xproeditor/vue": "0.1.0", + "@xproeditor/vue": "0.2.0", "vue": "^3.5.13" }, "devDependencies": { diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md new file mode 100644 index 0000000..922509f --- /dev/null +++ b/packages/core/CHANGELOG.md @@ -0,0 +1,27 @@ +# @xproeditor/core + +## 0.2.0 + +### Minor Changes + +- 12c180b: Add a new `button` block type (label, link URL, open-in-new-tab, primary/outline/ghost style, alignment) with a settings popover in both adapters and read-only rendering in `DocRenderer`. + + Add a standalone, categorized emoji picker (search, 7 categories, recents) usable both from the callout icon button and via a Slack/Discord-style `:` inline trigger that searches and inserts an emoji directly into text. + + Fix several real bugs surfaced while building the Bento showcase theme: + - Slash-menu arrow-key/Enter navigation was dead on arrival — the root keydown handler bailed out for any key typed inside the contenteditable block the menu lives in, which is the only place slash state ever exists. + - Floating UI (slash menu, bubble toolbar, popovers, dropdowns) is portaled to `document.body`, which silently escaped any theme class scoped to an ancestor of the editor — these now resync `--xpe-*` variables onto the portaled node so scoped custom themes apply everywhere, not just inline. + - The to-do checkbox's checkmark and the toggle chevron were sized via Tailwind utility classes that weren't reliably taking effect on raw SVGs — both now use explicit width/height so the checkmark is always visible. + - Vue's button-block label lost all styling because it reused `ui/Button.vue`'s scoped `.xpe-btn` class names on a plain `
` — Vue scoped CSS only applies to elements a component itself renders, so the classes were dead. Replaced with locally-scoped styles. + + Slash menu now groups items into Basic/Lists/Media/Advanced sections, locks page scroll while open (Notion-style), and flips above the caret when there's no room below. + +- d987bf0: Add a right-click context menu on blocks (Notion-style): Duplicate, Delete, and — for callout blocks — a Color flyout with the existing background presets, all in a clean two-level menu with no extra clutter. + + Add slim, theme-token-driven custom scrollbars across every scrollable surface (popovers, dropdowns, the slash/emoji menus, tables, code blocks, the editor root, and the doc renderer) instead of the browser default — add the `.xpe-scroll` class to any other scrollable container you build to match. + + Soften corners across the whole popover/menu/button/input/callout/table/code family to scale off `--xpe-radius` instead of hardcoded pixel values, so a single token change now reshapes the entire editor consistently. + + Fix: the text/highlight color popover in the floating bubble toolbar could never actually be used — clicking a swatch immediately closed the panel. The panel's "stay open" effect compared the toolbar's position by object reference, and a same-range `selectionchange` event (fired by clicking inside the toolbar itself) always produces a fresh position object, so the panel closed itself before a color could register. Also fixed a malformed Tailwind class that left the "active color" checkmark badge invisible, and replaced a few remaining hardcoded indigo accents with theme tokens. + +- a2089e1: Add `audio` and `file` block types with upload / library / URL insertion, per-file metadata (name, size, MIME), download card UI, and read-only rendering in `DocRenderer`. Media import now works out of the box without an `upload` prop (object-URL fallback), supports pasting files from the clipboard, and dropping OS files directly onto the editor at a precise position. Image blocks gain a paste-URL tab. Core exports new media helpers: `blockTypeForFile`, `formatFileSize`, `mediaPropsFromFile`, `fileToObjectUrl`, `acceptForBlockType`. diff --git a/packages/core/package.json b/packages/core/package.json index 1331423..dcf90d5 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@xproeditor/core", - "version": "0.1.0", + "version": "0.2.0", "description": "Framework-agnostic engine for the XProEditor Notion-like block editor: block model, selection, clipboard, HTML conversion, and table operations.", "type": "module", "license": "MIT", @@ -10,7 +10,14 @@ "directory": "packages/core" }, "homepage": "https://github.com/xofdev/xproeditor#readme", - "keywords": ["editor", "block-editor", "notion", "wysiwyg", "rich-text", "contenteditable"], + "keywords": [ + "editor", + "block-editor", + "notion", + "wysiwyg", + "rich-text", + "contenteditable" + ], "sideEffects": false, "main": "./dist/index.cjs", "module": "./dist/index.js", @@ -23,7 +30,11 @@ }, "./package.json": "./package.json" }, - "files": ["dist", "LICENSE", "README.md"], + "files": [ + "dist", + "LICENSE", + "README.md" + ], "scripts": { "build": "tsup", "dev": "tsup --watch", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md new file mode 100644 index 0000000..110b0fc --- /dev/null +++ b/packages/react/CHANGELOG.md @@ -0,0 +1,35 @@ +# @xproeditor/react + +## 0.2.0 + +### Minor Changes + +- 12c180b: Add a new `button` block type (label, link URL, open-in-new-tab, primary/outline/ghost style, alignment) with a settings popover in both adapters and read-only rendering in `DocRenderer`. + + Add a standalone, categorized emoji picker (search, 7 categories, recents) usable both from the callout icon button and via a Slack/Discord-style `:` inline trigger that searches and inserts an emoji directly into text. + + Fix several real bugs surfaced while building the Bento showcase theme: + - Slash-menu arrow-key/Enter navigation was dead on arrival — the root keydown handler bailed out for any key typed inside the contenteditable block the menu lives in, which is the only place slash state ever exists. + - Floating UI (slash menu, bubble toolbar, popovers, dropdowns) is portaled to `document.body`, which silently escaped any theme class scoped to an ancestor of the editor — these now resync `--xpe-*` variables onto the portaled node so scoped custom themes apply everywhere, not just inline. + - The to-do checkbox's checkmark and the toggle chevron were sized via Tailwind utility classes that weren't reliably taking effect on raw SVGs — both now use explicit width/height so the checkmark is always visible. + - Vue's button-block label lost all styling because it reused `ui/Button.vue`'s scoped `.xpe-btn` class names on a plain `
` — Vue scoped CSS only applies to elements a component itself renders, so the classes were dead. Replaced with locally-scoped styles. + + Slash menu now groups items into Basic/Lists/Media/Advanced sections, locks page scroll while open (Notion-style), and flips above the caret when there's no room below. + +- d987bf0: Add a right-click context menu on blocks (Notion-style): Duplicate, Delete, and — for callout blocks — a Color flyout with the existing background presets, all in a clean two-level menu with no extra clutter. + + Add slim, theme-token-driven custom scrollbars across every scrollable surface (popovers, dropdowns, the slash/emoji menus, tables, code blocks, the editor root, and the doc renderer) instead of the browser default — add the `.xpe-scroll` class to any other scrollable container you build to match. + + Soften corners across the whole popover/menu/button/input/callout/table/code family to scale off `--xpe-radius` instead of hardcoded pixel values, so a single token change now reshapes the entire editor consistently. + + Fix: the text/highlight color popover in the floating bubble toolbar could never actually be used — clicking a swatch immediately closed the panel. The panel's "stay open" effect compared the toolbar's position by object reference, and a same-range `selectionchange` event (fired by clicking inside the toolbar itself) always produces a fresh position object, so the panel closed itself before a color could register. Also fixed a malformed Tailwind class that left the "active color" checkmark badge invisible, and replaced a few remaining hardcoded indigo accents with theme tokens. + +- a2089e1: Add `audio` and `file` block types with upload / library / URL insertion, per-file metadata (name, size, MIME), download card UI, and read-only rendering in `DocRenderer`. Media import now works out of the box without an `upload` prop (object-URL fallback), supports pasting files from the clipboard, and dropping OS files directly onto the editor at a precise position. Image blocks gain a paste-URL tab. Core exports new media helpers: `blockTypeForFile`, `formatFileSize`, `mediaPropsFromFile`, `fileToObjectUrl`, `acceptForBlockType`. +- a2089e1: Slash-command menu now measures itself and positions precisely at the caret — flipping above when near the viewport bottom, clamping to the viewport edges, staying aligned in RTL, and showing a "No results" state instead of abruptly closing. Theming: a richer minimal token set (`--xpe-surface`, `--xpe-surface-hover`, `--xpe-primary-muted`, `--xpe-primary-foreground`, `--xpe-ring`, `--xpe-danger`, `--xpe-radius`, `--xpe-shadow`) plus a built-in dark theme via the `xpe-dark` class or `data-xpe-theme="dark"`; the slash menu, media blocks, and all editor chrome (toolbars, popovers, dropdown menus, inputs, tabs, table controls, gutter, text blocks) are fully token-driven, so the built-in dark theme and custom themes restyle the entire editor. Remaining physical CSS (left/right) converted to logical properties for correct RTL layout. + +### Patch Changes + +- Updated dependencies [12c180b] +- Updated dependencies [d987bf0] +- Updated dependencies [a2089e1] + - @xproeditor/core@0.2.0 diff --git a/packages/react/package.json b/packages/react/package.json index 7715df3..f42d2db 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@xproeditor/react", - "version": "0.1.0", + "version": "0.2.0", "description": "Notion-like block editor for React — supports a sticky format toolbar and/or a floating Notion-like bubble toolbar + slash menu.", "type": "module", "license": "MIT", @@ -10,8 +10,18 @@ "directory": "packages/react" }, "homepage": "https://github.com/xofdev/xproeditor#readme", - "keywords": ["react", "editor", "block-editor", "notion", "wysiwyg", "rich-text", "contenteditable"], - "sideEffects": ["**/*.css"], + "keywords": [ + "react", + "editor", + "block-editor", + "notion", + "wysiwyg", + "rich-text", + "contenteditable" + ], + "sideEffects": [ + "**/*.css" + ], "main": "./dist/index.cjs", "module": "./dist/index.js", "types": "./dist/index.d.ts", @@ -24,7 +34,11 @@ "./style.css": "./dist/style.css", "./package.json": "./package.json" }, - "files": ["dist", "LICENSE", "README.md"], + "files": [ + "dist", + "LICENSE", + "README.md" + ], "scripts": { "build": "tsup && tailwindcss -i ./src/styles/tailwind-entry.css -o ./dist/style.css --minify", "dev": "tsup --watch", @@ -35,7 +49,7 @@ "react-dom": "^18.0.0 || ^19.0.0" }, "dependencies": { - "@xproeditor/core": "0.1.0", + "@xproeditor/core": "0.2.0", "highlight.js": "^11.10.0", "lucide-react": "^0.469.0" }, diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md new file mode 100644 index 0000000..b9a03f1 --- /dev/null +++ b/packages/vue/CHANGELOG.md @@ -0,0 +1,35 @@ +# @xproeditor/vue + +## 0.2.0 + +### Minor Changes + +- 12c180b: Add a new `button` block type (label, link URL, open-in-new-tab, primary/outline/ghost style, alignment) with a settings popover in both adapters and read-only rendering in `DocRenderer`. + + Add a standalone, categorized emoji picker (search, 7 categories, recents) usable both from the callout icon button and via a Slack/Discord-style `:` inline trigger that searches and inserts an emoji directly into text. + + Fix several real bugs surfaced while building the Bento showcase theme: + - Slash-menu arrow-key/Enter navigation was dead on arrival — the root keydown handler bailed out for any key typed inside the contenteditable block the menu lives in, which is the only place slash state ever exists. + - Floating UI (slash menu, bubble toolbar, popovers, dropdowns) is portaled to `document.body`, which silently escaped any theme class scoped to an ancestor of the editor — these now resync `--xpe-*` variables onto the portaled node so scoped custom themes apply everywhere, not just inline. + - The to-do checkbox's checkmark and the toggle chevron were sized via Tailwind utility classes that weren't reliably taking effect on raw SVGs — both now use explicit width/height so the checkmark is always visible. + - Vue's button-block label lost all styling because it reused `ui/Button.vue`'s scoped `.xpe-btn` class names on a plain `
` — Vue scoped CSS only applies to elements a component itself renders, so the classes were dead. Replaced with locally-scoped styles. + + Slash menu now groups items into Basic/Lists/Media/Advanced sections, locks page scroll while open (Notion-style), and flips above the caret when there's no room below. + +- d987bf0: Add a right-click context menu on blocks (Notion-style): Duplicate, Delete, and — for callout blocks — a Color flyout with the existing background presets, all in a clean two-level menu with no extra clutter. + + Add slim, theme-token-driven custom scrollbars across every scrollable surface (popovers, dropdowns, the slash/emoji menus, tables, code blocks, the editor root, and the doc renderer) instead of the browser default — add the `.xpe-scroll` class to any other scrollable container you build to match. + + Soften corners across the whole popover/menu/button/input/callout/table/code family to scale off `--xpe-radius` instead of hardcoded pixel values, so a single token change now reshapes the entire editor consistently. + + Fix: the text/highlight color popover in the floating bubble toolbar could never actually be used — clicking a swatch immediately closed the panel. The panel's "stay open" effect compared the toolbar's position by object reference, and a same-range `selectionchange` event (fired by clicking inside the toolbar itself) always produces a fresh position object, so the panel closed itself before a color could register. Also fixed a malformed Tailwind class that left the "active color" checkmark badge invisible, and replaced a few remaining hardcoded indigo accents with theme tokens. + +- a2089e1: Add `audio` and `file` block types with upload / library / URL insertion, per-file metadata (name, size, MIME), download card UI, and read-only rendering in `DocRenderer`. Media import now works out of the box without an `upload` prop (object-URL fallback), supports pasting files from the clipboard, and dropping OS files directly onto the editor at a precise position. Image blocks gain a paste-URL tab. Core exports new media helpers: `blockTypeForFile`, `formatFileSize`, `mediaPropsFromFile`, `fileToObjectUrl`, `acceptForBlockType`. +- a2089e1: Slash-command menu now measures itself and positions precisely at the caret — flipping above when near the viewport bottom, clamping to the viewport edges, staying aligned in RTL, and showing a "No results" state instead of abruptly closing. Theming: a richer minimal token set (`--xpe-surface`, `--xpe-surface-hover`, `--xpe-primary-muted`, `--xpe-primary-foreground`, `--xpe-ring`, `--xpe-danger`, `--xpe-radius`, `--xpe-shadow`) plus a built-in dark theme via the `xpe-dark` class or `data-xpe-theme="dark"`; the slash menu, media blocks, and all editor chrome (toolbars, popovers, dropdown menus, inputs, tabs, table controls, gutter, text blocks) are fully token-driven, so the built-in dark theme and custom themes restyle the entire editor. Remaining physical CSS (left/right) converted to logical properties for correct RTL layout. + +### Patch Changes + +- Updated dependencies [12c180b] +- Updated dependencies [d987bf0] +- Updated dependencies [a2089e1] + - @xproeditor/core@0.2.0 diff --git a/packages/vue/package.json b/packages/vue/package.json index 2629979..3ec510f 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@xproeditor/vue", - "version": "0.1.0", + "version": "0.2.0", "description": "Notion-like block editor for Vue 3 — supports a sticky format toolbar and/or a floating Notion-like bubble toolbar + slash menu.", "type": "module", "license": "MIT", @@ -10,8 +10,18 @@ "directory": "packages/vue" }, "homepage": "https://github.com/xofdev/xproeditor#readme", - "keywords": ["vue", "editor", "block-editor", "notion", "wysiwyg", "rich-text", "contenteditable"], - "sideEffects": ["**/*.css"], + "keywords": [ + "vue", + "editor", + "block-editor", + "notion", + "wysiwyg", + "rich-text", + "contenteditable" + ], + "sideEffects": [ + "**/*.css" + ], "main": "./dist/index.cjs", "module": "./dist/index.js", "types": "./dist/index.d.ts", @@ -24,7 +34,11 @@ "./style.css": "./dist/style.css", "./package.json": "./package.json" }, - "files": ["dist", "LICENSE", "README.md"], + "files": [ + "dist", + "LICENSE", + "README.md" + ], "scripts": { "build": "vite build", "dev": "vite build --watch", @@ -34,7 +48,7 @@ "vue": "^3.4.0" }, "dependencies": { - "@xproeditor/core": "0.1.0", + "@xproeditor/core": "0.2.0", "highlight.js": "^11.10.0", "lucide-vue-next": "^0.469.0" }, diff --git a/site/package.json b/site/package.json index 411f1ac..c6b71c5 100644 --- a/site/package.json +++ b/site/package.json @@ -10,7 +10,7 @@ "typecheck": "tsc --noEmit" }, "dependencies": { - "@xproeditor/react": "0.1.0", + "@xproeditor/react": "0.2.0", "lucide-react": "^0.469.0", "react": "^18.3.1", "react-dom": "^18.3.1"