feat: export useEditArticleEditor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matters/matters-editor",
-  "version": "0.2.0-alpha.53",
+  "version": "0.2.0-alpha.54",
   "description": "Editor for matters.news",
   "author": "https://github.com/thematters",
   "homepage": "https://github.com/thematters/matters-editor",

src/editors/EditArticle.tsx

@@ -0,0 +1,30 @@
+import { useEditor } from '@tiptap/react'
+import type { EditorOptions } from '@tiptap/react'
+import {
+  makeEditArticleEditorExtensions,
+  MakeArticleEditorExtensionsProps,
+} from './extensions'
+
+type UseEditArticleEditorProps = {
+  content: string
+} & MakeArticleEditorExtensionsProps &
+  Partial<EditorOptions>
+
+export const useEditArticleEdtor = ({
+  content,
+  placeholder,
+  mentionSuggestion,
+  ...editorProps
+}: UseEditArticleEditorProps) => {
+  const { extensions, ...restProps } = editorProps
+  const editor = useEditor({
+    extensions: [
+      ...makeEditArticleEditorExtensions({ placeholder, mentionSuggestion }),
+      ...(extensions || []),
+    ],
+    content,
+    ...restProps,
+  })
+
+  return editor
+}

src/editors/extensions/figureEmbed.ts

@@ -58,7 +58,7 @@ enum Provider {
   CodePen = 'codepen',
 }
 
-export const normalizeEmbedURL = (url: string): NormalizeEmbedURLReturn => {
+const normalizeEmbedURL = (url: string): NormalizeEmbedURLReturn => {
   const fallbackReturn: NormalizeEmbedURLReturn = {
     url: '',
     allowfullscreen: false,
@@ -167,8 +167,8 @@ export const normalizeEmbedURL = (url: string): NormalizeEmbedURLReturn => {
     }
 
     return {
-      // url: `https://player.bilibili.com/player.html?bvid=${id}&autoplay=0`,
-      url: `https://player.bilibili.com/player.html?bvid=${id}`,
+      url: `https://player.bilibili.com/player.html?bvid=${id}&autoplay=0`,
+      // url: `https://player.bilibili.com/player.html?bvid=${id}`,
       provider: Provider.Bilibili,
       allowfullscreen: true,
       sandbox: [],
@@ -304,6 +304,8 @@ export const FigureEmbed = Node.create({
       ...(isCode ? [`embed-code`] : []),
     ].join(' ')
 
+    console.log({ url })
+
     return [
       'figure',
       { class: className, ...(provider ? { 'data-provider': provider } : {}) },

src/editors/extensions/index.ts

@@ -21,15 +21,59 @@ import { Link } from './link'
 import { Mention, MentionSuggestion } from './mention'
 import { Bold } from './bold'
 import { HorizontalRule } from './horizontalRule'
+import { ReadOnlyFigureImage } from './readOnlyFigureImage'
+import { ReadOnlyFigureAudio } from './readOnlyFigureAudio'
+import { ReadOnlyFigureEmbed } from './readOnlyFigureEmbed'
 
 export * from './figureAudio'
 export * from './figureEmbed'
 export * from './figureImage'
+export * from './readOnlyFigureAudio'
+export * from './readOnlyFigureEmbed'
+export * from './readOnlyFigureImage'
 export * from './link'
 export * from './horizontalRule'
 export * from './mention'
 export * from './bold'
 
+const baseExtensions = (placeholder?: string) => [
+  Document,
+  History,
+  Placeholder.configure({
+    placeholder,
+  }),
+  // Basic Formats
+  Text,
+  Paragraph,
+  Bold,
+  Strike,
+  Code,
+  CodeBlock,
+  Blockquote,
+  HardBreak.configure({
+    HTMLAttributes: {
+      class: 'smart',
+    },
+  }),
+  HorizontalRule,
+  OrderedList,
+  ListItem,
+  BulletList,
+  // Custom Formats
+  Link,
+]
+
+const baseArticleExtensions = (placeholder?: string) => [
+  ...baseExtensions(placeholder),
+  Gapcursor,
+  Heading.configure({
+    levels: [2, 3],
+  }),
+]
+
+/**
+ * Article
+ */
 export type MakeArticleEditorExtensionsProps = {
   placeholder?: string
   mentionSuggestion?: MentionSuggestion
@@ -40,34 +84,7 @@ export const makeArticleEditorExtensions = ({
   mentionSuggestion,
 }: MakeArticleEditorExtensionsProps) => {
   const extensions = [
-    Document,
-    History,
-    Gapcursor,
-    Placeholder.configure({
-      placeholder,
-    }),
-    // Basic Formats
-    Text,
-    Paragraph,
-    Heading.configure({
-      levels: [2, 3],
-    }),
-    Bold,
-    Strike,
-    Code,
-    CodeBlock,
-    Blockquote,
-    HardBreak.configure({
-      HTMLAttributes: {
-        class: 'smart',
-      },
-    }),
-    HorizontalRule,
-    OrderedList,
-    ListItem,
-    BulletList,
-    // Custom Formats
-    Link,
+    ...baseArticleExtensions(placeholder),
     FigureImage,
     FigureAudio,
     FigureEmbed,
@@ -80,6 +97,27 @@ export const makeArticleEditorExtensions = ({
   return extensions
 }
 
+export const makeEditArticleEditorExtensions = ({
+  placeholder,
+  mentionSuggestion,
+}: MakeArticleEditorExtensionsProps) => {
+  const extensions = [
+    ...baseArticleExtensions(placeholder),
+    ReadOnlyFigureImage,
+    ReadOnlyFigureAudio,
+    ReadOnlyFigureEmbed,
+  ]
+
+  if (mentionSuggestion) {
+    extensions.push(Mention.configure({ suggestion: mentionSuggestion }))
+  }
+
+  return extensions
+}
+
+/**
+ * Comment
+ */
 export type MakeCommentEditorExtensionsProps = {
   placeholder?: string
   mentionSuggestion?: MentionSuggestion
@@ -89,32 +127,7 @@ export const makeCommentEditorExtensions = ({
   placeholder,
   mentionSuggestion,
 }: MakeCommentEditorExtensionsProps) => {
-  const extensions = [
-    Document,
-    History,
-    Placeholder.configure({
-      placeholder,
-    }),
-    // Basic Formats
-    Text,
-    Paragraph,
-    Bold,
-    Strike,
-    Code,
-    CodeBlock,
-    Blockquote,
-    HardBreak.configure({
-      HTMLAttributes: {
-        class: 'smart',
-      },
-    }),
-    HorizontalRule,
-    ListItem,
-    OrderedList,
-    BulletList,
-    // Custom Formats
-    Link,
-  ]
+  const extensions = [...baseExtensions(placeholder)]
 
   if (mentionSuggestion) {
     extensions.push(Mention.configure({ suggestion: mentionSuggestion }))

src/editors/extensions/readOnlyFigureAudio.ts

@@ -0,0 +1,91 @@
+import { Node } from '@tiptap/core'
+
+/**
+ * ReadyOnlyFigureAudio extension is similar to FigureAudio extension,
+ * but it is read-only for article revision.
+ */
+
+const pluginName = 'readOnlyFigureAudio'
+
+export const ReadOnlyFigureAudio = Node.create({
+  name: pluginName,
+  group: 'block',
+  content: 'text*',
+  draggable: true,
+  isolating: true,
+
+  // read-only
+  atom: true,
+
+  // disallows all marks for figcaption
+  marks: '',
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+        parseHTML: (element) =>
+          element.querySelector('source')?.getAttribute('src'),
+      },
+      title: {
+        default: '',
+        parseHTML: (element) => element.querySelector('.title')?.textContent,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'figure[class="audio"]',
+        contentElement: 'figcaption',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'figure',
+      { class: 'audio' },
+      [
+        'audio',
+        {
+          controls: true,
+          // for backward compatibility
+          // can be removed when fully switch to new editor
+          'data-file-name': HTMLAttributes.title,
+        },
+        [
+          'source',
+          {
+            src: HTMLAttributes.src,
+            type: 'audio/mp3',
+            draggable: false,
+            contenteditable: false,
+          },
+        ],
+      ],
+      [
+        'div',
+        { class: 'player' },
+        [
+          'header',
+          [
+            'div',
+            { class: 'meta' },
+            ['h4', { class: 'title' }, HTMLAttributes.title],
+            [
+              'div',
+              { class: 'time' },
+              ['span', { class: 'current', 'data-time': '00:00' }],
+              ['span', { class: 'duration', 'data-time': '--:--' }],
+            ],
+          ],
+          ['span', { class: 'play' }],
+        ],
+        ['footer', ['div', { class: 'progress-bar' }, ['span', {}]]],
+      ],
+      ['figcaption', 0],
+    ]
+  },
+})