experimental linters

commit 5b31740d967bb61bfed6a2338d07e8fc6e4957b3 Author: Hans Pagel <hans.pagel@ueber.io> Date: Tue Jan 19 14:48:00 2021 +0100 refactoring, disable TS checks for now commit 6fcc5082287ba4dd5457b8ea6e6d8300efaaafb6 Author: Hans Pagel <hans.pagel@ueber.io> Date: Tue Jan 19 14:42:14 2021 +0100 move everything to a new experiments structure commit 2b5f394ad4c916f7ac364fa03d05e2f4311e9b1d Author: Hans Pagel <hans.pagel@ueber.io> Date: Mon Jan 18 20:22:35 2021 +0100 refactoring commit 91a3747adca114fbce0972a2a2efa751e94d4ea4 Author: Hans Pagel <hans.pagel@ueber.io> Date: Mon Jan 18 17:48:59 2021 +0100 refactoring commit 4550fa70059060b6702425970ba33bcf6a0f3e66 Author: Hans Pagel <hans.pagel@ueber.io> Date: Mon Jan 18 17:37:43 2021 +0100 load plugins in the example commit a7087af14044673c587c233c44a5e767ff23b160 Author: Hans Pagel <hans.pagel@ueber.io> Date: Mon Jan 18 17:31:47 2021 +0100 init new linter plugin
2021-01-19 14:49:07 +01:00
parent 1e478cd26f
commit 5452095343
9 changed files with 327 additions and 0 deletions
--- a/docs/src/demos/Experiments/Linter/extension/Linter.ts
+++ b/docs/src/demos/Experiments/Linter/extension/Linter.ts
@@ -0,0 +1,98 @@
+// @ts-nocheck
+import { Extension } from '@tiptap/core'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
+
+function renderIcon(issue) {
+  const icon = document.createElement('div')
+
+  icon.className = 'lint-icon'
+  icon.title = issue.message
+  icon.issue = issue
+
+  return icon
+}
+
+function runAllLinterPlugins(doc, plugins) {
+  const decorations: [any?] = []
+
+  const results = plugins.map(LinterPlugin => {
+    return new LinterPlugin(doc).scan().getResults()
+  }).flat()
+
+  results.forEach(issue => {
+    decorations.push(Decoration.inline(issue.from, issue.to, {
+      class: 'problem',
+    }),
+    Decoration.widget(issue.from, renderIcon(issue)))
+  })
+
+  return DecorationSet.create(doc, decorations)
+}
+
+export interface LinterOptions {
+  plugins: [any],
+}
+
+export const Linter = Extension.create({
+  name: 'linter',
+
+  defaultOptions: <LinterOptions>{
+    plugins: [],
+  },
+
+  addProseMirrorPlugins() {
+    const { plugins } = this.options
+
+    return [
+      new Plugin({
+        key: new PluginKey('linter'),
+        state: {
+          init(_, { doc }) {
+            return runAllLinterPlugins(doc, plugins)
+          },
+          apply(transaction, prevState) {
+            return transaction.docChanged
+              ? runAllLinterPlugins(transaction.doc, plugins)
+              : prevState
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state)
+          },
+          handleClick(view, _, event) {
+            if (/lint-icon/.test(event.target.className)) {
+              const { from, to } = event.target.issue
+
+              view.dispatch(
+                view.state.tr
+                  .setSelection(TextSelection.create(view.state.doc, from, to))
+                  .scrollIntoView(),
+              )
+
+              return true
+            }
+          },
+          handleDoubleClick(view, _, event) {
+            if (/lint-icon/.test(event.target.className)) {
+              const prob = event.target.issue
+
+              if (prob.fix) {
+                prob.fix(view)
+                view.focus()
+                return true
+              }
+            }
+          },
+        },
+      }),
+    ]
+  },
+})
+
+declare module '@tiptap/core' {
+  interface AllExtensions {
+    Linter: typeof Linter,
+  }
+}