Merge pull request #499 from thematters/feat/campaign-editor

Campaign editor

package.json

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

src/editors/Campaign.tsx

@@ -0,0 +1,29 @@
+import { type EditorOptions, useEditor } from '@tiptap/react'
+
+import {
+  makeCampaignEditorExtensions,
+  type MakeCampaignEditorExtensionsProps,
+} from './extensions'
+
+type UseCampaignEditorProps = {
+  content: string
+} & MakeCampaignEditorExtensionsProps &
+  Partial<EditorOptions>
+
+export const useCampaignEditor = ({
+  content,
+  placeholder,
+  ...editorProps
+}: UseCampaignEditorProps) => {
+  const { extensions, ...restProps } = editorProps
+  const editor = useEditor({
+    extensions: [
+      ...makeCampaignEditorExtensions({ placeholder }),
+      ...(extensions ?? []),
+    ],
+    content,
+    ...restProps,
+  })
+
+  return editor
+}

src/editors/Journal.tsx → src/editors/Moment.tsx

@@ -1,25 +1,25 @@
 import { type EditorOptions, useEditor } from '@tiptap/react'
 
 import {
-  makeJournalEditorExtensions,
-  type MakeJournalEditorExtensionsProps,
+  makeMomentEditorExtensions,
+  type MakeMomentEditorExtensionsProps,
 } from './extensions'
 
-type UseJournalEditorProps = {
+type UseMomentEditorProps = {
   content: string
-} & MakeJournalEditorExtensionsProps &
+} & MakeMomentEditorExtensionsProps &
   Partial<EditorOptions>
 
-export const useJournalEditor = ({
+export const useMomentEditor = ({
   content,
   placeholder,
   mentionSuggestion,
   ...editorProps
-}: UseJournalEditorProps) => {
+}: UseMomentEditorProps) => {
   const { extensions, ...restProps } = editorProps
   const editor = useEditor({
     extensions: [
-      ...makeJournalEditorExtensions({ placeholder, mentionSuggestion }),
+      ...makeMomentEditorExtensions({ placeholder, mentionSuggestion }),
       ...(extensions ?? []),
     ],
     content,

src/editors/extensions/index.ts

@@ -111,17 +111,17 @@ export const makeCommentEditorExtensions = ({
 }
 
 /**
- * Journal
+ * Moment
  */
-export interface MakeJournalEditorExtensionsProps {
+export interface MakeMomentEditorExtensionsProps {
   placeholder?: string
   mentionSuggestion?: MentionSuggestion
 }
 
-export const makeJournalEditorExtensions = ({
+export const makeMomentEditorExtensions = ({
   placeholder,
   mentionSuggestion,
-}: MakeJournalEditorExtensionsProps) => {
+}: MakeMomentEditorExtensionsProps) => {
   const extensions = [...baseExtensions(placeholder)]
 
   if (mentionSuggestion) {
@@ -130,3 +130,30 @@ export const makeJournalEditorExtensions = ({
 
   return extensions
 }
+
+/**
+ * Campaign
+ */
+export interface MakeCampaignEditorExtensionsProps {
+  placeholder?: string
+}
+
+export const makeCampaignEditorExtensions = ({
+  placeholder,
+}: MakeCampaignEditorExtensionsProps) => {
+  return [
+    Document,
+    History,
+    Placeholder.configure({
+      placeholder,
+    }),
+    // Basic Formats
+    Text,
+    Paragraph,
+    HardBreak.configure({
+      HTMLAttributes: {
+        class: 'smart',
+      },
+    }),
+  ]
+}

src/editors/index.ts

@@ -1,4 +1,5 @@
 export * from './Article'
+export * from './Campaign'
 export * from './Comment'
-export * from './Journal'
+export * from './Moment'
 export * from '@tiptap/react'

src/transformers/normalize.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, test } from 'vitest'
 
 import {
   normalizeArticleHTML,
+  normalizeCampaignHTML,
   normalizeCommentHTML,
   NormalizeOptions,
 } from './normalize'
@@ -25,6 +26,11 @@ const expectNormalizeCommentHTML = (
   expect(result.trim()).toBe(output)
 }
 
+const expectNormalizeCampaignHTML = (input: string, output: string) => {
+  const result = normalizeCampaignHTML(input)
+  expect(result.trim()).toBe(output)
+}
+
 /**
  * Tests
  */
@@ -439,3 +445,43 @@ describe('Normalization: Comment', () => {
     )
   })
 })
+
+describe('Normalization: Campaign', () => {
+  test('quote is not supported', () => {
+    expectNormalizeCampaignHTML(
+      stripIndent`
+        <blockquote>
+          <p>1</p>
+          <p>2</p>
+          <p>3</p>
+        </blockquote>
+      `,
+      '<p>1</p><p>2</p><p>3</p>',
+    )
+  })
+
+  test('bold is not supported', () => {
+    expectNormalizeCampaignHTML('<p><strong>abc</strong></p>', '<p>abc</p>')
+    expectNormalizeCampaignHTML('<p><b>abc</b></p>', '<p>abc</p>')
+  })
+
+  test('strikethrough is not supported', () => {
+    expectNormalizeCampaignHTML('<p><s>abc</s></p>', '<p>abc</p>')
+    expectNormalizeCampaignHTML('<p><del>abc</del></p>', '<p>abc</p>')
+    expectNormalizeCampaignHTML('<p><strike>abc</strike></p>', '<p>abc</p>')
+  })
+
+  test('link is not supported', () => {
+    expectNormalizeCampaignHTML(
+      '<p><a target="_blank" rel="noopener noreferrer nofollow" href="https://example.com">abc</a></p>',
+      '<p>abc</p>',
+    )
+  })
+
+  test('line break', () => {
+    expectNormalizeCampaignHTML(
+      '<p>hello,<br>world</p>',
+      '<p>hello,<br class="smart">world</p>',
+    )
+  })
+})

src/transformers/normalize.ts

@@ -6,8 +6,9 @@ import { createHTMLDocument, parseHTML, type VHTMLDocument } from 'zeed-dom'
 
 import {
   makeArticleEditorExtensions,
+  makeCampaignEditorExtensions,
   makeCommentEditorExtensions,
-  makeJournalEditorExtensions,
+  makeMomentEditorExtensions,
   Mention,
 } from '../editors/extensions'
 
@@ -100,11 +101,11 @@ export const normalizeCommentHTML = (
   return normalizedHtml
 }
 
-export const normalizeJournalHTML = (
+export const normalizeMomentHTML = (
   html: string,
   options?: NormalizeOptions,
 ): string => {
-  const extensions = makeJournalEditorExtensions({})
+  const extensions = makeMomentEditorExtensions({})
   const normalizer = makeNormalizer([...extensions, Mention])
 
   let normalizedHtml = normalizer(html)
@@ -115,3 +116,10 @@ export const normalizeJournalHTML = (
 
   return normalizedHtml
 }
+
+export const normalizeCampaignHTML = (html: string): string => {
+  const extensions = makeCampaignEditorExtensions({})
+  const normalizer = makeNormalizer(extensions)
+
+  return normalizer(html)
+}