@flexiui/svelte-rich-text 0.0.1

package/dist/RichText.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponentTyped } from "svelte";
+import "./styles.css";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RichTextProps = typeof __propDef.props;
+export type RichTextEvents = typeof __propDef.events;
+export type RichTextSlots = typeof __propDef.slots;
+export default class RichText extends SvelteComponentTyped<RichTextProps, RichTextEvents, RichTextSlots> {
+}
+export {};

package/dist/extensions/EnhancedLink.d.ts

@@ -0,0 +1 @@
+export declare const EnhancedLink: import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any>;

package/dist/extensions/EnhancedLink.js

@@ -0,0 +1,33 @@
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { Link } from '@tiptap/extension-link';
+export const EnhancedLink = Link.extend({
+    addProseMirrorPlugins() {
+        return [
+            new Plugin({
+                key: new PluginKey('linkClickHandler'),
+                props: {
+                    handleClick: (view, _pos, event) => {
+                        // Special-handling only for Cmd+Click or mouse-wheel clicks, otherwise let TipTap handle it
+                        const qualifiedClick = event.button === 1 || (event.button === 0 && (event.metaKey || event.ctrlKey));
+                        if (!view.editable || !qualifiedClick) {
+                            return false;
+                        }
+                        let target = event.target;
+                        while (target !== null && target.nodeName !== 'A' && target.nodeName !== 'DIV') {
+                            target = target.parentNode;
+                        }
+                        if (target?.nodeName !== 'A') {
+                            return false;
+                        }
+                        const href = target.getAttribute('href');
+                        if (href === null) {
+                            return false;
+                        }
+                        window.open(href, '_blank', 'noreferrer');
+                        return true;
+                    },
+                },
+            }),
+        ];
+    },
+});

package/dist/extensions/SpecialBox.d.ts

@@ -0,0 +1,10 @@
+import { Mark } from "@tiptap/core";
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        specialBox: {
+            specialBox: () => ReturnType;
+            isActive: (options: any) => ReturnType;
+        };
+    }
+}
+export declare const SpecialBox: Mark<any, any>;

package/dist/extensions/SpecialBox.js

@@ -0,0 +1,33 @@
+import { Mark } from "@tiptap/core";
+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() {
+        return {
+            specialBox: () => ({ commands }) => {
+                return commands.toggleMark(this.name);
+            },
+            isActive: (options) => {
+                return options.type === this.name;
+            },
+        };
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import RichText from './RichText.svelte';
+export { RichText };

package/dist/index.js

@@ -0,0 +1,2 @@
+import RichText from './RichText.svelte';
+export { RichText };

package/dist/styles.css

@@ -0,0 +1,181 @@
+:root {
+    --purple-light: #d2bcff29;
+    --purple: #535bf2;
+    --black: #000;
+    --white: #fff;
+    --gray-1: #f0f0f0;
+    --gray-2: #e0e0e0;
+    --gray-3: #c0c0c0;
+    --toolbar-gap: 5px;
+    --toolbar-padding: 5px;
+}
+
+/* Basic editor styles */
+.tiptap {
+  outline: none;
+
+  :first-child {
+    margin-top: 0;
+  }
+
+  /* Heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    margin-top: 1.5rem;
+    text-wrap: pretty;
+  }
+
+  h1,
+  h2 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  h1 {
+    font-size: 1.4rem;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+  }
+
+  h3 {
+    font-size: 1.1rem;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+
+  /* Code and preformatted text styles */
+  code {
+    background-color: var(--purple-light);
+    border-radius: 0.4rem;
+    color: var(--white);
+    font-size: 0.85rem;
+    padding: 0.25em 0.3em;
+  }
+
+  pre {
+    background: var(--black);
+    border-radius: 0.5rem;
+    color: var(--white);
+    font-family: 'JetBrainsMono', monospace;
+    margin: 1.5rem 0;
+    padding: 0.75rem 1rem;
+
+    code {
+      background: none;
+      color: inherit;
+      font-size: 0.8rem;
+      padding: 0;
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--gray-3);
+    margin: 1.5rem 0;
+    padding-left: 1rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--gray-2);
+    margin: 2rem 0;
+  }
+
+    /* List styles */
+  ul,
+  ol {
+    padding: 0 1.25rem;
+    margin: 1.25rem 1rem 1.25rem 0.4rem;
+
+    li p {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+    }
+  }
+
+  ul[data-type=taskList]{
+    padding-left: 0;
+
+    li {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    li[data-checked=true] > div > p {
+      opacity: .5;
+      text-decoration: line-through;
+    }
+  }
+
+  ul[data-type="taskList"] li {
+    & label {
+      position: relative;
+      padding-top: 0.275rem;
+      padding-right: 0.5rem;
+
+      input {
+        width: 16px;
+        height: 16px;
+        margin: 0;
+        accent-color: #8affd7;
+      }
+    }
+
+    & > div {
+      flex: auto;
+    }
+  }
+
+  .special-box {
+    position: relative;
+    padding: 0 12px;
+    display: inline-flex;
+
+    &::before {
+      content: "";
+      position: absolute;
+      height: calc(100% + 20px);
+      width: 100%;
+      border-inline: 1px dashed;
+      left: 0;
+      top: -10px;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      height: 100%;
+      top: 0;
+      left: -10px;
+      width: calc(100% + 20px);
+      border-block: 1px dashed;
+    }
+
+    &::before, &::after {
+      border-color: #ffffff33;
+      pointer-events: none;
+    }
+  }
+}
+
+.fl-rich-text-content {
+  outline: none;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  min-height: 56px;
+  padding: 2rem;
+  background: #242424;
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@flexiui/svelte-rich-text",
+  "version": "0.0.1",
+  "description": "A lightweight and flexible rich text editor component for Svelte",
+  "keywords": [
+    "svelte",
+    "rich text",
+    "editor",
+    "wysiwyg",
+    "flexiui"
+  ],
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && svelte-package",
+    "preview": "vite preview"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "author": "alexgipi <alexgp895@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "@flexiui/svelte-dropdown": "^0.4.0",
+    "@tiptap/core": "^3.0.9",
+    "@tiptap/extension-text-align": "^3.6.6",
+    "@tiptap/extension-text-style": "^3.0.9",
+    "@tiptap/pm": "^3.0.9",
+    "@tiptap/starter-kit": "^3.0.9",
+    "@tiptap/static-renderer": "^3.0.9"
+  }
+}