@seorii/tiptap 0.3.0-next.8 → 0.3.0

package/dist/tiptap/tiptap.js

@@ -1,4 +1,4 @@
-import { Editor, mergeAttributes } from '@tiptap/core';
+import { Editor, Extension, mergeAttributes } from '@tiptap/core';
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
 import { all, createLowlight } from 'lowlight';
 import Code from '@tiptap/extension-code';
@@ -18,7 +18,7 @@ import Superscript from '@tiptap/extension-superscript';
 import Subscript from '@tiptap/extension-subscript';
 import { Indent } from '../plugin/indent';
 import { Color } from '@tiptap/extension-color';
-import TextStyle from '@tiptap/extension-text-style';
+import { TextStyle } from '@tiptap/extension-text-style';
 import Iframe from '../plugin/iframe';
 import Embed from '../plugin/embed';
 // @ts-ignore
@@ -27,6 +27,7 @@ import Youtube from '../plugin/youtube';
 import Placeholder from '@tiptap/extension-placeholder';
 import command from '../plugin/command/suggest';
 import emoji from '../plugin/command/emoji';
+import { countSlashItems, moveSlashSelection, runSlashItemAt, slashState } from '../plugin/command/stores.svelte';
 import i18n from '../i18n';
 import js from 'highlight.js/lib/languages/javascript';
 import ts from 'highlight.js/lib/languages/typescript';
@@ -37,6 +38,18 @@ import kotlin from 'highlight.js/lib/languages/kotlin';
 import go from 'highlight.js/lib/languages/go';
 import csharp from 'highlight.js/lib/languages/csharp';
 import rust from 'highlight.js/lib/languages/rust';
+const codeBlockLanguageOptions = [
+    { value: 'auto', label: 'auto' },
+    { value: 'cpp', label: 'cpp' },
+    { value: 'python', label: 'python' },
+    { value: 'java', label: 'java' },
+    { value: 'js', label: 'js' },
+    { value: 'ts', label: 'ts' },
+    { value: 'kotlin', label: 'kotlin' },
+    { value: 'go', label: 'go' },
+    { value: 'csharp', label: 'csharp' },
+    { value: 'rust', label: 'rust' }
+];
 const lowlight = () => {
     const lowlight = createLowlight(all);
     lowlight.register('js', js);
@@ -50,20 +63,160 @@ const lowlight = () => {
     lowlight.register('rust', rust);
     return lowlight;
 };
-const extensions = (placeholder, plugins, crossorigin) => [
-    CodeBlockLowlight.extend({
-        addKeyboardShortcuts() {
+const normalizeCodeBlockLanguage = (language) => {
+    if (typeof language !== 'string')
+        return 'auto';
+    const normalized = language.trim();
+    return normalized.length ? normalized : 'auto';
+};
+const resolveCodeBlockLanguageLabel = (value, labelMap, fallbackLabel = value) => {
+    const label = labelMap[value]?.trim();
+    return label?.length ? label : fallbackLabel;
+};
+const slashKeymap = Extension.create({
+    name: 'slash-keymap',
+    priority: 10000,
+    addKeyboardShortcuts() {
+        return {
+            Enter: () => {
+                if (!slashState.visible)
+                    return false;
+                return runSlashItemAt(slashState.selectedIndex);
+            },
+            Tab: () => {
+                if (!slashState.visible || countSlashItems() === 0)
+                    return false;
+                moveSlashSelection(1);
+                return true;
+            },
+            'Shift-Tab': () => {
+                if (!slashState.visible || countSlashItems() === 0)
+                    return false;
+                moveSlashSelection(-1);
+                return true;
+            },
+            ArrowUp: () => {
+                if (!slashState.visible || countSlashItems() === 0)
+                    return false;
+                moveSlashSelection(-1);
+                return true;
+            },
+            ArrowDown: () => {
+                if (!slashState.visible || countSlashItems() === 0)
+                    return false;
+                moveSlashSelection(1);
+                return true;
+            }
+        };
+    }
+});
+const CodeBlockWithLanguageSelect = CodeBlockLowlight.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            languageLabelMap: {}
+        };
+    },
+    addKeyboardShortcuts() {
+        return {
+            ...this.parent?.(),
+            Tab: () => {
+                if (this.editor.isActive('codeBlock')) {
+                    return this.editor.commands.insertContent('    ');
+                }
+                return false;
+            }
+        };
+    },
+    addNodeView() {
+        return ({ node, getPos, editor }) => {
+            let currentNode = node;
+            const languageLabelMap = this.options.languageLabelMap || {};
+            const dom = document.createElement('div');
+            dom.className = 'tiptap-code-block';
+            const toolbar = document.createElement('div');
+            toolbar.className = 'tiptap-code-block-toolbar';
+            const languageSelect = document.createElement('select');
+            languageSelect.className = 'tiptap-code-block-language';
+            for (const option of codeBlockLanguageOptions) {
+                const element = document.createElement('option');
+                element.value = option.value;
+                element.textContent = resolveCodeBlockLanguageLabel(option.value, languageLabelMap, option.label);
+                languageSelect.append(element);
+            }
+            toolbar.append(languageSelect);
+            const pre = document.createElement('pre');
+            const contentDOM = document.createElement('code');
+            pre.append(contentDOM);
+            dom.append(toolbar, pre);
+            const ensureLanguageOption = (value) => {
+                if ([...languageSelect.options].some((option) => option.value === value))
+                    return;
+                const element = document.createElement('option');
+                element.value = value;
+                element.textContent = resolveCodeBlockLanguageLabel(value, languageLabelMap);
+                languageSelect.append(element);
+            };
+            const syncLanguageSelection = () => {
+                const language = normalizeCodeBlockLanguage(currentNode.attrs.language);
+                ensureLanguageOption(language);
+                languageSelect.value = language;
+            };
+            const handleLanguageChange = () => {
+                let pos = null;
+                try {
+                    pos = getPos();
+                }
+                catch {
+                    pos = null;
+                }
+                if (typeof pos !== 'number')
+                    return;
+                const selectedLanguage = languageSelect.value;
+                const language = selectedLanguage === 'auto' ? null : selectedLanguage;
+                const latestNode = editor.state.doc.nodeAt(pos);
+                if (!latestNode || latestNode.type.name !== this.name)
+                    return;
+                editor.commands.command(({ tr, dispatch }) => {
+                    tr.setNodeMarkup(pos, undefined, {
+                        ...latestNode.attrs,
+                        language
+                    });
+                    dispatch?.(tr);
+                    return true;
+                });
+            };
+            languageSelect.addEventListener('change', handleLanguageChange);
+            syncLanguageSelection();
             return {
-                ...this.parent?.(),
-                Tab: () => {
-                    if (this.editor.isActive('codeBlock')) {
-                        return this.editor.commands.insertContent('    ');
-                    }
+                dom,
+                contentDOM,
+                update: (updatedNode) => {
+                    if (updatedNode.type !== currentNode.type)
+                        return false;
+                    currentNode = updatedNode;
+                    syncLanguageSelection();
                     return true;
+                },
+                stopEvent: (event) => {
+                    const target = event.target;
+                    if (!(target instanceof HTMLElement))
+                        return false;
+                    return Boolean(target.closest('.tiptap-code-block-toolbar'));
+                },
+                destroy: () => {
+                    languageSelect.removeEventListener('change', handleLanguageChange);
                 }
             };
-        }
-    }).configure({ lowlight: lowlight() }),
+        };
+    }
+});
+const extensions = (placeholder, plugins, crossorigin, codeBlockLanguageLabels) => [
+    CodeBlockWithLanguageSelect.configure({
+        lowlight: lowlight(),
+        languageLabelMap: codeBlockLanguageLabels
+    }),
+    slashKeymap,
     Image(crossorigin),
     Youtube,
     StarterKit,
@@ -104,14 +257,15 @@ const extensions = (placeholder, plugins, crossorigin) => [
     Placeholder.configure({ placeholder }),
     ...plugins
 ];
-export default (element, content, { placeholder = i18n('placeholder'), plugins = [], crossorigin, ...props } = {}) => {
+export default (element, content, { placeholder = i18n('placeholder'), plugins = [], crossorigin, codeBlockLanguageLabels = {}, ...props } = {}) => {
     const tt = new Editor({
         element,
         content,
         ...props,
-        extensions: extensions(placeholder, plugins, crossorigin)
+        extensions: extensions(placeholder, plugins, crossorigin, codeBlockLanguageLabels)
     });
-    tt.registerPlugin(emoji(tt));
-    tt.registerPlugin(command(tt));
+    // Suggestion key handlers must run before default keymap handlers.
+    tt.registerPlugin(emoji(tt), (plugin, all) => [plugin, ...all]);
+    tt.registerPlugin(command(tt), (plugin, all) => [plugin, ...all]);
     return tt;
 };

package/package.json

@@ -1,86 +1,88 @@
 {
 	"name": "@seorii/tiptap",
-	"version": "0.3.0-next.8",
+	"version": "0.3.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",
 		"build-page": "vite build",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
 		"package": "svelte-kit sync && svelte-package && publint",
 		"prepublishOnly": "npm run package",
 		"page": "npm run build-page && node gh-pages.js"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.16.1",
-		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "4.0.0",
-		"@types/sanitize-html": "^2.13.0",
-		"@typescript-eslint/eslint-plugin": "^8.21.0",
-		"@typescript-eslint/parser": "^8.21.0",
-		"eslint": "^9.19.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte3": "^4.0.0",
+		"@eslint/js": "^9.39.3",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.53.0",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "6.2.4",
+		"@types/sanitize-html": "^2.16.0",
+		"@typescript-eslint/eslint-plugin": "^8.56.0",
+		"@typescript-eslint/parser": "^8.56.0",
+		"eslint": "^9.39.3",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.15.0",
 		"gh-pages": "^6.3.0",
+		"globals": "^17.3.0",
 		"highlight.js": "^11.11.1",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"publint": "^0.2.12",
-		"sass-embedded": "^1.83.4",
-		"svelte": "^5.19.3",
-		"svelte-check": "^4.0.5",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.5.0",
+		"publint": "^0.3.17",
+		"svelte": "^5.53.2",
+		"svelte-check": "^4.4.3",
+		"svelte-eslint-parser": "^1.4.1",
 		"tslib": "^2.8.1",
-		"typescript": "^5.7.3",
-		"vite": "^5.4.10"
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
 	},
 	"type": "module",
 	"dependencies": {
-		"@justinribeiro/lite-youtube": "^1.7.1",
+		"@justinribeiro/lite-youtube": "^1.9.0",
 		"@seorii/prosemirror-math": "^0.4.2",
-		"@tiptap/core": "^2.11.5",
-		"@tiptap/extension-code": "^2.11.5",
-		"@tiptap/extension-code-block": "^2.11.5",
-		"@tiptap/extension-code-block-lowlight": "^2.11.5",
-		"@tiptap/extension-color": "^2.11.5",
-		"@tiptap/extension-dropcursor": "^2.11.5",
-		"@tiptap/extension-highlight": "^2.11.5",
-		"@tiptap/extension-image": "^2.11.5",
-		"@tiptap/extension-link": "^2.11.5",
-		"@tiptap/extension-ordered-list": "^2.11.5",
-		"@tiptap/extension-placeholder": "^2.11.5",
-		"@tiptap/extension-subscript": "^2.11.5",
-		"@tiptap/extension-superscript": "^2.11.5",
-		"@tiptap/extension-table": "^2.11.5",
-		"@tiptap/extension-table-cell": "^2.11.5",
-		"@tiptap/extension-table-header": "^2.11.5",
-		"@tiptap/extension-table-row": "^2.11.5",
-		"@tiptap/extension-text-align": "^2.11.5",
-		"@tiptap/extension-text-style": "^2.11.5",
-		"@tiptap/extension-underline": "^2.11.5",
-		"@tiptap/html": "^2.11.5",
-		"@tiptap/pm": "^2.11.5",
-		"@tiptap/starter-kit": "^2.11.5",
-		"@tiptap/suggestion": "^2.11.5",
+		"@tiptap/core": "^2",
+		"@tiptap/extension-code": "^2",
+		"@tiptap/extension-code-block": "^2",
+		"@tiptap/extension-code-block-lowlight": "^2",
+		"@tiptap/extension-color": "^2",
+		"@tiptap/extension-dropcursor": "^2",
+		"@tiptap/extension-highlight": "^2",
+		"@tiptap/extension-image": "^2",
+		"@tiptap/extension-link": "^2",
+		"@tiptap/extension-ordered-list": "^2",
+		"@tiptap/extension-placeholder": "^2",
+		"@tiptap/extension-subscript": "^2",
+		"@tiptap/extension-superscript": "^2",
+		"@tiptap/extension-table": "^2",
+		"@tiptap/extension-table-cell": "^2",
+		"@tiptap/extension-table-header": "^2",
+		"@tiptap/extension-table-row": "^2",
+		"@tiptap/extension-text-align": "^2",
+		"@tiptap/extension-text-style": "^2",
+		"@tiptap/extension-underline": "^2",
+		"@tiptap/html": "^2",
+		"@tiptap/pm": "^2",
+		"@tiptap/starter-kit": "^2",
+		"@tiptap/suggestion": "^2",
 		"emojis-keywords": "2.0.0",
 		"emojis-list": "3.0.0",
 		"lowlight": "^3.3.0",
-		"nunui": "2.0.0-next.47",
-		"prosemirror-commands": "^1.7.0",
-		"prosemirror-model": "^1.25.0",
-		"prosemirror-state": "^1.4.3",
-		"prosemirror-tables": "^1.6.4",
-		"prosemirror-transform": "^1.10.3",
-		"prosemirror-view": "^1.38.1",
-		"sanitize-html": "^2.15.0",
-		"svelte-awesome-color-picker": "^4.0.0",
-		"svelte-tiptap": "^2.1.0",
+		"nunui": "2.0.0-next.51",
+		"prosemirror-commands": "^1.7.1",
+		"prosemirror-model": "^1.25.4",
+		"prosemirror-state": "^1.4.4",
+		"prosemirror-tables": "^1.8.5",
+		"prosemirror-transform": "^1.11.0",
+		"prosemirror-view": "^1.41.6",
+		"sanitize-html": "^2.17.1",
+		"svelte-awesome-color-picker": "^4.1.1",
+		"svelte-tiptap": "^2",
 		"tippy.js": "^6.3.7"
 	},
 	"exports": {
@@ -103,6 +105,10 @@
 		"url": "https://github.com/seorii/tiptap.git"
 	},
 	"pnpm": {
+		"overrides": {
+			"@tiptap/extension-bubble-menu": "2.6.6",
+			"@tiptap/extension-floating-menu": "2.6.6"
+		},
 		"onlyBuiltDependencies": [
 			"@parcel/watcher",
 			"esbuild"

package/dist/plugin/command/stores.d.ts

@@ -1,13 +0,0 @@
-export declare const slashVisible: import("svelte/store").Writable<boolean>;
-export declare const slashItems: import("svelte/store").Writable<never[]>;
-export declare const slashLocaltion: import("svelte/store").Writable<{
-    x: number;
-    y: number;
-    height: number;
-}>;
-export declare const slashProps: import("svelte/store").Writable<{
-    editor: null;
-    range: null;
-}>;
-export declare const slashDetail: import("svelte/store").Writable<null>;
-export declare const slashSelection: import("svelte/store").Writable<null>;

package/dist/plugin/command/stores.js

@@ -1,7 +0,0 @@
-import { writable } from 'svelte/store';
-export const slashVisible = writable(false);
-export const slashItems = writable([]);
-export const slashLocaltion = writable({ x: 0, y: 0, height: 0 });
-export const slashProps = writable({ editor: null, range: null });
-export const slashDetail = writable(null);
-export const slashSelection = writable(null);

package/dist/plugin/table/style/resize.scss

@@ -1,26 +0,0 @@
-.ProseMirror {
-	table .column-resize-handle {
-		position: absolute;
-		top: 0;
-		right: -2px;
-		bottom: -2px;
-		width: 4px;
-		pointer-events: none;
-		background-color: var(--primary-light6);
-		opacity: 0;
-
-		.editable & {
-			opacity: 1;
-		}
-	}
-
-	&.resize-cursor {
-		pointer-events: none;
-
-		.editable & {
-			pointer-events: initial;
-			cursor: ew-resize;
-			cursor: col-resize; /* stylelint-disable declaration-block-no-duplicate-properties */
-		}
-	}
-}

package/dist/plugin/table/style.scss

@@ -1,4 +0,0 @@
-@import './style/grip';
-@import './style/table';
-@import './style/cell';
-@import './style/resize';