add an abbreviation extension

2024-11-27 14:59:27 +08:00 · 2021-10-20 14:43:41 +02:00 · 2021-10-20 14:43:41 +02:00 · 4999285796
commit 4999285796
parent f45c8d0ca7
7 changed files with 225 additions and 0 deletions
--- a/demos/src/Marks/Abbreviation/Vue/index.html
+++ b/demos/src/Marks/Abbreviation/Vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('Marks/Abbreviation', source)
+    </script>
+  </body>
+</html>
--- a/demos/src/Marks/Abbreviation/Vue/index.spec.js
+++ b/demos/src/Marks/Abbreviation/Vue/index.spec.js
@ -0,0 +1,7 @@
+context('/src/Marks/Abbreviation/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Marks/Abbreviation/Vue/')
+  })
+
+  // TODO: Write tests
+})
--- a/demos/src/Marks/Abbreviation/Vue/index.vue
+++ b/demos/src/Marks/Abbreviation/Vue/index.vue
@ -0,0 +1,80 @@
+<template>
+  <div v-if="editor">
+    <button @click="toggleAbbreviation" :class="{ 'is-active': editor.isActive('abbreviation') }">
+      toggleAbbreviation
+    </button>
+    <button @click="setAbbreviation" :disabled="editor.isActive('abbreviation')">
+      setAbbreviation
+    </button>
+    <button @click="editor.chain().focus().extendMarkRange('abbreviation').unsetAbbreviation().run()" :disabled="!editor.isActive('abbreviation')">
+      unsetAbbreviation
+    </button>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Abbreviation from '@tiptap/extension-abbreviation'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  methods: {
+    toggleAbbreviation() {
+      if (this.editor.isActive('abbreviation')) {
+        return this.editor.chain()
+          .extendMarkRange('abbreviation')
+          .unsetAbbreviation()
+          .focus()
+          .run()
+      }
+
+      const title = window.prompt('What’s the description or expansion of the abbreviation?')
+
+      this.editor.chain()
+        .focus()
+        .toggleAbbreviation(title)
+        .run()
+    },
+    setAbbreviation() {
+      const title = window.prompt('What’s the description or expansion of the abbreviation?')
+
+      this.editor.chain()
+        .focus()
+        .setAbbreviation(title)
+        .run()
+    },
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Abbreviation,
+      ],
+      content: `
+        <p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>
+      `,
+    })
+  },
+
+  beforeUnmount() {
+    this.editor.destroy()
+  },
+}
+</script>
--- a/packages/extension-abbreviation/README.md
+++ b/packages/extension-abbreviation/README.md
@ -0,0 +1,14 @@
+# @tiptap/extension-abbreviation
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-abbreviation.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-abbreviation)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-abbreviation.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-abbreviation.svg)](https://www.npmjs.com/package/@tiptap/extension-abbreviation)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Official Documentation
+Documentation can be found on the [tiptap website](https://tiptap.dev).
+
+## License
+tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).
--- a/packages/extension-abbreviation/package.json
+++ b/packages/extension-abbreviation/package.json
@ -0,0 +1,31 @@
+{
+  "name": "@tiptap/extension-abbreviation",
+  "description": "document extension for tiptap",
+  "version": "2.0.0-beta.1",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "main": "dist/tiptap-extension-abbreviation.cjs.js",
+  "umd": "dist/tiptap-extension-abbreviation.umd.js",
+  "module": "dist/tiptap-extension-abbreviation.esm.js",
+  "types": "dist/packages/extension-abbreviation/src/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@tiptap/core": "^2.0.0-beta.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-abbreviation"
+  }
+}
--- a/packages/extension-abbreviation/src/abbreviation.ts
+++ b/packages/extension-abbreviation/src/abbreviation.ts
@ -0,0 +1,73 @@
+import { Mark } from '@tiptap/core'
+
+export interface AbbreviationOptions {
+  HTMLAttributes: Record<string, any>,
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    abbreviation: {
+      /**
+       * Set an abbreviation mark
+       */
+      setAbbreviation: (title?: string) => ReturnType,
+      /**
+       * Toggle an abbreviation mark
+       */
+      toggleAbbreviation: (title?: string) => ReturnType,
+      /**
+       * Unset an abbreviation mark
+       */
+      unsetAbbreviation: () => ReturnType,
+    }
+  }
+}
+
+export const Abbreviation = Mark.create<AbbreviationOptions>({
+  name: 'abbreviation',
+
+  defaultOptions: {
+    HTMLAttributes: {},
+  },
+
+  addAttributes() {
+    return {
+      title: {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'abbr',
+      },
+      {
+        tag: 'acronym',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['abbr', HTMLAttributes, 0]
+  },
+
+  addCommands() {
+    return {
+      setAbbreviation: title => ({ commands }) => {
+        return commands.setMark('abbreviation', {
+          title,
+        })
+      },
+      toggleAbbreviation: title => ({ commands }) => {
+        return commands.toggleMark('abbreviation', {
+          title,
+        })
+      },
+      unsetAbbreviation: () => ({ commands }) => {
+        return commands.unsetMark('abbreviation')
+      },
+    }
+  },
+})
--- a/packages/extension-abbreviation/src/index.ts
+++ b/packages/extension-abbreviation/src/index.ts
@ -0,0 +1,5 @@
+import { Abbreviation } from './abbreviation'
+
+export * from './abbreviation'
+
+export default Abbreviation