chore: update test github pages

tiptiz · Dec 10, 2024 · 9107839 · 9107839
1 parent 1085078
commit 9107839
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 This is a guide project for exploring `Svelte` and `Tiptap` to create a WYSIWYG rich text editor,
 so , this project is **in prototype phase**.
 
-The project final goal is to create a `free` & `open source` & `HTML5 Copy/Paste Friendly`
+This project final goal is to create a `HTML5 Copy/Paste Friendly`
 & `Email Friendly` & `Markdown Friendly` feature rich WYSIWYG rich text editor.
 
 ## Features Table

diff --git a/example/dev-server.mjs b/example/dev-server.mjs
@@ -23,8 +23,9 @@ content.put("/content", (req, res) => {
 const viteDevServer = await import("vite").then(vite =>
     vite.createServer({
         server: {
-            middlewareMode: true, watch: {
-                ignored: [fileTarget]
+            middlewareMode: true,
+            watch: {
+                // ignored: [fileTarget]
             }
         }
     })

diff --git a/example/src/assets/explain.html b/example/src/assets/explain.html
@@ -1,4 +1,4 @@
-<h1 style="margin: 5px 0; font-size: 1.625em; font-weight: bolder; margin-top: 0.5em">Tiptap Contentful example project</h1><p>This is a practive project for exploring <code style="
+<h1 style="margin: 5px 0; font-size: 1.625em; font-weight: bolder; margin-top: 0.5em"><b>Tiptap Contentful example project</b></h1><p>This is a practive project for exploring <code style="
             padding: 2px 6px;
             border-radius: 3px;
             background-color: #dfdfdf;
@@ -10,20 +10,173 @@ <h1 style="margin: 5px 0; font-size: 1.625em; font-weight: bolder; margin-top: 0
             padding: 2px 6px;
             border-radius: 3px;
             background-color: #dfdfdf;
-        ">free</code> &amp; <code style="
+        ">HTML5 Copy/Paste Friendly</code> &amp; <code style="
             padding: 2px 6px;
             border-radius: 3px;
             background-color: #dfdfdf;
-        ">open source</code> &amp; <code style="
-            padding: 2px 6px;
-            border-radius: 3px;
-            background-color: #dfdfdf;
-        ">HTML5 Copy/Paste Friendly</code></p><p>&amp; <code style="
+        ">Email Friendly</code> &amp; <code style="
             padding: 2px 6px;
             border-radius: 3px;
             background-color: #dfdfdf;
-        ">Email Friendly</code> &amp; <code style="
+        ">Markdown Friendly</code> feature rich WYSIWYG rich text editor.</p><pre class="code-block" language="javascript" highlightlines="" showlinenumbers="false" theme="vitesse-dark"><code class="language-javascript">import type { EditorOptions, Extensions } from "@tiptap/core"
+
+import { horizontalTypes, lowContrastBg, lowContrastGray } from "@/utils/editor-presets"
+
+import { Editor } from "@tiptap/core"
+import Blockquote from "@tiptap/extension-blockquote"
+import Bold from "@tiptap/extension-bold"
+import Code from "@tiptap/extension-code"
+import Color from "@tiptap/extension-color"
+import Document from "@tiptap/extension-document"
+import DropCursor from "@tiptap/extension-dropcursor"
+import FontFamily from "@tiptap/extension-font-family"
+import Highlight from "@tiptap/extension-highlight"
+import History from "@tiptap/extension-history"
+import Image from "@tiptap/extension-image"
+import Italic from "@tiptap/extension-italic"
+import ListItem from "@tiptap/extension-list-item"
+import Paragraph from "@tiptap/extension-paragraph"
+import Placeholder from "@tiptap/extension-placeholder"
+import Strike from "@tiptap/extension-strike"
+import Sub from "@tiptap/extension-subscript"
+import Sup from "@tiptap/extension-superscript"
+import Table from "@tiptap/extension-table"
+import TableCell from "@tiptap/extension-table-cell"
+import TableHeader from "@tiptap/extension-table-header"
+import TableRow from "@tiptap/extension-table-row"
+import TaskListItem from "@tiptap/extension-task-item"
+import TaskList from "@tiptap/extension-task-list"
+import Text from "@tiptap/extension-text"
+import TextAlign from "@tiptap/extension-text-align"
+import TextStyle from "@tiptap/extension-text-style"
+import Underline from "@tiptap/extension-underline"
+import BulletList from "tiptap-extension-bullet-list"
+import CodeBlockShiki from "tiptap-extension-code-block-shiki"
+import FontSize from "tiptap-extension-font-size"
+import HardBreak from "tiptap-extension-hard-break"
+import Heading from "tiptap-extension-heading"
+import HorizontalRules from "tiptap-extension-horizontal-rules"
+import Indent from "tiptap-extension-indent"
+import LineHeight from "tiptap-extension-line-height"
+import Margin from "tiptap-extension-margin"
+import TrailingNode from "tiptap-extension-trailing-node"
+import { attrs, css } from "tiptap-utils-shared"
+
+export const extensions: Extensions = [
+    Document,
+    Placeholder.configure({ placeholder: "Write down your imagination …" }),
+    DropCursor,
+    History,
+    Paragraph,
+    TrailingNode,
+    Text,
+    TextStyle, /*           */// given ability to let &lt;span style="" /&gt; element can keep style attribute
+    TextAlign.configure({ types: ["heading", "paragraph"] }),
+    FontFamily,
+    FontSize,
+    Heading.configure(attrs({ all: { style: css`margin: 5px 0` } })),
+    LineHeight,
+    Color,
+    Highlight.configure({ multicolor: true }),
+    Italic,
+    Strike,
+    Underline,
+    Indent,
+    Margin,
+    HardBreak,
+    // TODO better hr style
+    HorizontalRules.configure({
+        ...attrs({
+            style: css`
+                border-color: ${lowContrastGray};
+                margin-top: 10px;
+                margin-bottom: 10px;
+                border-top-width: 2px
+            `
+        }),
+        types: horizontalTypes
+    }),
+    Bold.extend({ renderHTML: ({ HTMLAttributes }) =&gt; ["b", HTMLAttributes, 0] }),
+    Code.configure(attrs({
+        style: css`
             padding: 2px 6px;
             border-radius: 3px;
             background-color: #dfdfdf;
-        ">Markdown Friendly</code> feature rich WYSIWYG rich text editor.</p><p></p>
+        `
+    })),
+    Sub,
+    Sup,
+    BulletList.configure(attrs({ class: "list-paddingleft-1", style: css`padding-left: 1.25em` })),
+    ListItem,
+    TaskList.configure(attrs({
+        style: css`
+            /*
+             * It's a hack here, for some editor (eg: wechat editor) 
+             * didn't support 0 value padding
+             * so, you can paste taskList with style now
+             */
+            padding-left: 1px;
+            margin-left: -1px;
+        `
+    })),
+    TaskListItem.configure({
+        nested: true,
+        ...attrs({
+            style: css`
+                display: flex;
+                gap: 0.625em;
+            `
+        })
+    }),
+    Blockquote.configure(attrs({
+        style: css`
+            overflow: hidden;
+            padding: 10px 20px;
+            border-left: 4px;
+            border-style: solid;
+            border-color: ${lowContrastGray};
+            background-color: ${lowContrastBg}
+        `
+    })),
+    CodeBlockShiki.configure({
+        ...attrs({ class: "code-block" }),
+        defaultLanguage: "javascript",
+        defaultTheme: "vitesse-dark"
+    }),
+    Image.configure(attrs({
+        style: css`
+            display: block;
+            margin: 0 auto;
+            max-width: 100%;
+            max-height: 1000px;
+            height: auto;
+        `
+    })),
+    Table.configure({ resizable: true, allowTableNodeSelection: true }),
+    TableCell.configure(attrs({
+        style: css`border: 1px solid ${lowContrastGray}`
+    })),
+    TableHeader.configure(attrs({
+        style: css`
+            background-color: ${lowContrastBg};
+            border: 1px solid ${lowContrastGray}
+        `
+    })),
+    TableRow
+]
+
+export const createEditor = (options?: Partial&lt;EditorOptions&gt;) =&gt; {
+    const container = document.createElement("div")
+    container.classList.add("editor-container")
+    container.style.fontSize = "16px"
+
+    return {
+        container,
+        editor: new Editor({
+            element: container,
+            extensions,
+            content: "",
+            ...options
+        })
+    }
+}</code></pre><p></p>
diff --git a/example/vite.config.ts b/example/vite.config.ts
@@ -4,6 +4,7 @@ import tsconfigPaths from "vite-plugin-tsconfig-paths"
 
 // https://vite.dev/config/
 export default defineConfig({
+    base: "https://aolyang.github.io/tiptap-contentful",
     plugins: [
         svelte(),
         tsconfigPaths()