@flexiui/svelte-rich-text 0.0.1 → 0.0.3

package/README.md

@@ -181,4 +181,67 @@ You can add custom extensions to the editor by passing them as an array to the `
 
 In this example, the `SpecialBox` extension is imported from a file called `SpecialBox.ts` in the `editor/custom-extensions` directory.
 
+In this case, the `SpecialBox` extension is a custom "Mark" that adds a special box inline node to the editor.
+
+```ts
+import { Mark } from "@tiptap/core";
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    specialBox: {
+      specialBox: () => ReturnType
+      isActive: (options: any) => ReturnType
+    }
+  }
+}
+
+export const SpecialBox = Mark.create({
+  name: "specialBox",
+  excludes: 'code highlight',
+
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-special-box]",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "span",
+      {
+        "class": "special-box",
+        "data-special-box": "true",
+        style: "line-height: 1.5;",
+      },
+      0,
+    ];
+  },
+
+  addCommands(): any {
+    return {
+      specialBox: () => ({ commands }: any) => {
+        return commands.toggleMark(this.name);
+      },
+      isActive: (options: any) => {
+        return options.type === this.name;
+      },
+    };
+  },
+});
+```
+
+In this example, the `SpecialBox` extension defines a custom "Mark" that adds a special box inline node to the editor.
+
+The `parseHTML` method defines the HTML structure of the special box node. In this case, the node is a `<span>` element with a `data-special-box` attribute.
+
+The `renderHTML` method defines the HTML structure of the special box node. In this case, the node is a `<span>` element with a `data-special-box` attribute and a `special-box` class.
+
+The `addCommands` method defines the commands for the special box node. In this case, the `specialBox` command toggles the mark on the selected text.
+
+The `isActive` method defines the logic for determining whether the special box node is active or not. In this case, the node is active if the selected text has the `specialBox` mark.
+
+You can customize the behavior of the special box node by modifying the `SpecialBox` extension as needed.
+
 More information about custom nodes, marks and extensions can be found in the [Tiptap documentation](https://tiptap.dev/docs/editor/extensions/custom-extensions/create-new).

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@flexiui/svelte-rich-text",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "A lightweight and flexible rich text editor component for Svelte",
   "keywords": [
     "svelte",
     "rich text",
     "editor",
     "wysiwyg",
-    "flexiui"
+    "flexiui",
+    "text editor",
+    "tiptap",
+    "prosemirror"
   ],
   "type": "module",
   "scripts": {
@@ -38,6 +41,7 @@
   "dependencies": {
     "@flexiui/svelte-dropdown": "^0.4.0",
     "@tiptap/core": "^3.0.9",
+    "@tiptap/extension-highlight": "^3.6.6",
     "@tiptap/extension-text-align": "^3.6.6",
     "@tiptap/extension-text-style": "^3.0.9",
     "@tiptap/pm": "^3.0.9",