Skip to content

Commit

Permalink
feat: example use suits
Browse files Browse the repository at this point in the history
  • Loading branch information
@aolyang
aolyang committed Dec 27, 2024
1 parent 5d0e7ef commit 1668deb
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 171 deletions.
40 changes: 3 additions & 37 deletions example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,47 +11,13 @@
"check": "svelte-check --tsconfig ./tsconfig.json"
},
"dependencies": {
"@tiptap/extension-blockquote": "^2.10.3",
"@tiptap/extension-bold": "^2.10.3",
"@tiptap/extension-bubble-menu": "^2.10.3",
"@tiptap/extension-code": "^2.10.3",
"@tiptap/extension-color": "^2.10.3",
"@tiptap/extension-document": "^2.10.3",
"@tiptap/extension-dropcursor": "^2.10.3",
"@tiptap/extension-font-family": "^2.10.3",
"@tiptap/extension-highlight": "^2.10.3",
"@tiptap/extension-history": "^2.10.3",
"@tiptap/extension-image": "^2.10.3",
"@tiptap/extension-italic": "^2.10.3",
"@tiptap/extension-link": "^2.10.3",
"@tiptap/extension-list-item": "^2.10.3",
"@tiptap/extension-paragraph": "^2.10.3",
"@tiptap/extension-placeholder": "^2.10.3",
"@tiptap/extension-strike": "^2.10.3",
"@tiptap/extension-subscript": "^2.10.3",
"@tiptap/extension-superscript": "^2.10.3",
"@tiptap/extension-table": "^2.10.3",
"@tiptap/extension-table-cell": "^2.10.3",
"@tiptap/extension-table-header": "^2.10.3",
"@tiptap/extension-table-row": "^2.10.3",
"@tiptap/extension-task-item": "^2.10.3",
"@tiptap/extension-task-list": "^2.10.3",
"@tiptap/extension-text": "^2.10.3",
"@tiptap/extension-text-align": "^2.10.3",
"@tiptap/extension-text-style": "^2.10.3",
"@tiptap/extension-underline": "^2.10.3",
"@tiptap/extension-dropcursor": "^2.10.3",
"emoji-picker-element": "^1.26.0",
"tiptap-extension-bullet-list": "workspace:*",
"tiptap-extension-code-block-shiki": "workspace:*",
"tiptap-extension-font-size": "workspace:*",
"tiptap-extension-hard-break": "workspace:*",
"tiptap-extension-heading": "workspace:*",
"tiptap-utils-shared": "workspace:*",
"tiptap-extension-horizontal-rules": "workspace:*",
"tiptap-extension-indent": "workspace:*",
"tiptap-extension-line-height": "workspace:*",
"tiptap-extension-margin": "workspace:*",
"tiptap-extension-trailing-node": "workspace:*",
"tiptap-utils-shared": "workspace:*"
"@tiptiz/rich-suits": "workspace:*"
},
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^4.0.1",
Expand Down
3 changes: 2 additions & 1 deletion example/src/components/AssetsTree.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
"first-page.html": () => import("../assets/first-page.html?raw").then(m => m.default),
"wikis/explain.html": () => import("../assets/wikis/explain.html?raw").then(m => m.default),
"dev-logs/progress-2024-12-15.html": () => import("../assets/dev-logs/progress-2024-12-15.html?raw").then(m => m.default),
"dev-logs/progress-2024-12-20.html": () => import("../assets/dev-logs/progress-2024-12-20.html?raw").then(m => m.default)
"dev-logs/progress-2024-12-20.html": () => import("../assets/dev-logs/progress-2024-12-20.html?raw").then(m => m.default),
"dev-use/test.html": () => import("../assets/dev-use/test.html?raw").then(m => m.default)
} as const
const createAsset = (name: string, path = name): TreeItem => ({
Expand Down
200 changes: 67 additions & 133 deletions example/src/utils/editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,153 +3,87 @@ 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 Link from "@tiptap/extension-link"
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 DropCursor from "@tiptap/extension-dropcursor"
import TiptizSuites from "@tiptiz/rich-suits"
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 <span style="" /> 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.extend({ renderHTML: ({ HTMLAttributes }) => ["i", HTMLAttributes, 0] }),
Strike.extend({
addKeyboardShortcuts() {
// Mod Shift s has been used by Edge screenshot
return {
"Mod-Shift-X": () => this.editor.commands.toggleStrike()
}
}
}),
Underline,
Indent,
Margin,
HardBreak,
// TODO better hr style
HorizontalRules.configure({
...attrs({
DropCursor,
TiptizSuites.configure({
Placeholder: { placeholder: "Write down your imagination …" },
TextAlign: { types: ["heading", "paragraph"] },
Heading: attrs({ all: { style: css`margin: 5px 0` } }),
HorizontalRules: {
...attrs({
style: css`
border-color: ${lowContrastGray};
margin-top: 10px;
margin-bottom: 10px;
border-top-width: 2px
`
}),
types: horizontalTypes
},
Link: attrs({
style: css`
text-decoration: underline;
color: #0096dc;
cursor: pointer
`
}),
BulletList: attrs({ class: "list-paddingleft-1", style: css`padding-left: 1.25em` }),
TaskList: attrs({
style: css`
border-color: ${lowContrastGray};
margin-top: 10px;
margin-bottom: 10px;
border-top-width: 2px
/*
* 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;
`
}),
types: horizontalTypes
}),
Bold.extend({ renderHTML: ({ HTMLAttributes }) => ["b", HTMLAttributes, 0] }),
Code.configure(attrs({ class: "inline-code" })),
Sub,
Sup,
Link.configure(attrs({
style: css`
text-decoration: underline;
color: #0096dc;
cursor: pointer
`
})),
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({
TaskListItem: attrs({
style: css`
display: flex;
gap: 0.625em;
`
})
}),
Blockquote.configure(attrs({
style: css`
overflow: hidden;
padding: 5px 0 5px 10px;
border-left: 4px solid ${lowContrastGray};
margin: 10px 0;
`
})),
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
}),
Blockquote: attrs({
style: css`
overflow: hidden;
padding: 5px 0 5px 10px;
border-left: 4px solid ${lowContrastGray};
margin: 10px 0;
`
}),
CodeBlockShiki: {
defaultLanguage: "javascript",
defaultTheme: "vitesse-dark"
},
Image: attrs({
style: css`
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 1000px;
height: auto;
`
}),
TableCell: attrs({
style: css`border: 1px solid ${lowContrastGray}`
}),
TableHeader: attrs({
style: css`
background-color: ${lowContrastBg};
border: 1px solid ${lowContrastGray}
`
}),
})
]

export const createEditor = (options?: Partial<EditorOptions>) => {
Expand Down

0 comments on commit 1668deb

Please sign in to comment.