@mirus/tiptap-editor 2.0.0

package/dist/assets/index-7678a4fb.css

@@ -0,0 +1 @@
+.error-list .error-list__item.selected,.error-list .error-list__item:hover{background-color:#fff3}.tiptap-editor{border:1px solid #e5e7eb;border-radius:8px;padding:4px}.tiptap-editor p.is-empty:first-child:before{content:attr(data-placeholder);float:left;color:#aaa;pointer-events:none;height:0}.tiptap-editor .menubar{padding:4px;border-radius:4px;background-color:#f4f4f5}.tiptap-editor .menubar button{font-size:14px;background-color:transparent;border:none;cursor:pointer;height:30px;outline:50;width:35px;vertical-align:bottom;border-radius:4px;margin-right:3px}.tiptap-editor .menubar button:focus{outline:2px solid #3b82f6;transition:all .08s ease-in-out}.tiptap-editor .menubar button.is-active{background-color:#d3e3fd}.tiptap-editor .menubar button.is-active:focus{background-color:#bfd2f9}.tiptap-editor .menubar button:not(.is-active):hover{background-color:#e5e7eb}.tiptap-editor .menubar button:not(.is-active):focus{background-color:#e5e7eb}.tiptap-editor .menubar button svg{width:12px}.tiptap-editor .editor__content{font-size:16px;outline:0;overflow-y:auto;padding:10px}.tiptap-editor .editor__content .underline-red{border-bottom:3px red solid}.tiptap-editor .editor__content .underline-orange{border-bottom:3px orange solid}.tiptap-editor .editor__content .underline-green{border-bottom:3px lightgreen solid}.tiptap-editor .editor__content .underline-blue{border-bottom:3px #3b82f6 solid}.tiptap-editor .editor__content ul{padding:0 40px}.tiptap-editor .editor__content .ProseMirror{height:100%;padding:2px;border-radius:7px}.tiptap-editor .editor__content .ProseMirror:focus{outline:2px solid #3b82f6;transition:all .08s ease-in-out}.character-count{padding:4px 15px 4px 4px;border-radius:4px;background-color:#fafafa;text-align:right;display:flex;gap:8px;justify-content:flex-end;color:#71717a}.character-count__graph{color:#a8c2f7}.character-count__graph--warning{color:#fb7373}

package/dist/index.html

@@ -0,0 +1,14 @@
+<script type="module" crossorigin src="/assets/index-40717dd0.js"></script>
+<link rel="stylesheet" href="/assets/index-7678a4fb.css">
+<meta charset="utf-8">
+<title>tiptap-editor demo</title>
+
+<style>
+  body {
+    font-family: sans-serif;
+  }
+</style>
+
+
+<div id="app"></div>
+

package/package.json

@@ -0,0 +1,80 @@
+{
+    "name": "@mirus/tiptap-editor",
+    "version": "2.0.0",
+    "description": "custom setup for the tiptap editor",
+    "repository": "https://github.com/mirusresearch/tiptap-editor",
+    "bugs": {
+	"url": "https://github.com/mirusresearch/tiptap-editor"
+    },
+    "homepage": "https://github.com/mirusresearch/tiptap-editor",
+    "author": "alec@mirusresearch.com",
+    "license": "MIT",
+    "main": "dist/tiptap-editor.umd.min.js",
+    "browser": {
+	"./sfc": "src/tiptap-editor.vue"
+    },
+    "files": [
+	"dist/*",
+	"src/*",
+	"public/*",
+	"*.json",
+	"*.js"
+    ],
+    "scripts": {
+	"serve": "vite",
+	"build": "vite build",
+	"preview": "vite preview",
+	"format": "prettier --write \"src\" \"test\"",
+	"validate:format": "prettier --check \"src\" \"test\"",
+	"test": "vitest run",
+	"test:watch": "vitest",
+	"coverage": "vitest run --coverage"
+    },
+    "devDependencies": {
+	"@babel/core": "^7.4.4",
+	"@babel/helper-define-map": "^7.18.6",
+	"@babel/helper-regex": "^7.10.5",
+	"@babel/polyfill": "^7.4.4",
+	"@babel/preset-env": "^7.4.4",
+	"@tiptap/core": "^2.1.10",
+	"@tiptap/extension-bold": "^2.1.10",
+	"@tiptap/extension-bullet-list": "^2.1.10",
+	"@tiptap/extension-character-count": "^2.1.10",
+	"@tiptap/extension-document": "^2.1.10",
+	"@tiptap/extension-history": "^2.0.3",
+	"@tiptap/extension-italic": "^2.1.10",
+	"@tiptap/extension-list-item": "^2.1.10",
+	"@tiptap/extension-paragraph": "^2.1.10",
+	"@tiptap/extension-placeholder": "^2.1.10",
+	"@tiptap/extension-text": "^2.1.10",
+	"@tiptap/pm": "^2.0.3",
+	"@tiptap/vue-2": "^2.1.10",
+	"@vitejs/plugin-vue2": "^2.2.0",
+	"@vitest/coverage-v8": "^0.32.2",
+	"@vue/babel-preset-app": "^3.7.0",
+	"@vue/test-utils": "^1.3.6",
+	"babel-loader": "^8.0.5",
+	"babel-polyfill": "^6.26.0",
+	"current-script-polyfill": "^1.0.0",
+	"eslint": "^5.15.3",
+	"flush-promises": "^1.0.2",
+	"happy-dom": "^9.20.3",
+	"lodash.get": "^4.4.2",
+	"lodash.unescape": "^4.0.1",
+	"prettier": "2.8.8",
+	"sass": "1.60.0",
+	"tippy.js": "^4.3.1",
+	"vite": "^4.3.9",
+	"vitest": "^0.32.2",
+	"vue": "^2.6.10",
+	"webpack": "^4.31.0"
+    },
+    "browserslist": [
+	"> 1%",
+	"last 2 versions",
+	"ie >= 9"
+    ],
+    "dependencies": {
+	"vue-template-compiler": "^2.7.14"
+    }
+}

package/src/App.vue

@@ -0,0 +1,60 @@
+<template>
+    <tiptapEditor
+        :value.sync="localtext"
+        :warnings="warnings"
+        :showMenu="showMenu"
+        :maxCharacterCount="maxCharacterCount"
+        :height="height"
+        v-on:new-character-count="localcount = $event"
+        id="unique_id"
+        placeholder="write something will-ya!"
+    />
+</template>
+
+<script>
+import tiptapEditor from './tiptap-editor.vue';
+
+export default {
+    name: 'app',
+    components: { tiptapEditor },
+    data() {
+        return {
+            maxCharacterCount: 200, //default null for infinity
+            height: '200px', // default it 300px
+            showMenu: true, // false to hide
+            warnings: [
+                {
+                    value: 'red',
+                    message: 'did you mean...',
+                    options: ['read', 'reed'], // optional
+                    // default class is red
+                },
+                {
+                    value: 'prob|emati(', // avoid regexs that go bump in the night
+                    isWord: false,
+                    message: 'What even is this?',
+                },
+                {
+                    value: '<script&gt;', // can use the real thing, or escape it
+                    isWord: false,
+                    message: 'you sure you wanted a tag?',
+                    overrideClass: 'underline-blue', // optional
+                },
+                {
+                    value: 'green',
+                    message: 'I really like this!',
+                    overrideClass: 'underline-green', // optional
+                },
+                {
+                    value: 'orange',
+                    message: 'this is a bad idea!',
+                    overrideClass: 'underline-orange', // optional
+                },
+            ],
+            localtext:
+                'Hi! 👋🏻 &lt;script&gt; welcome to tiptap editor, here is a red mark blue with suggestions. Even prob|emati( strings. You can highlight with other colors, e.g blue, orange, and green!!',
+            localcount: null,
+        };
+    },
+};
+</script>

package/src/App.vue~

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        testx
+    </div>
+</template>
+
+<script>
+/* import tiptapEditor from './tiptap-editor.vue';*/
+
+export default {
+    name: 'dev',
+    /* components: { tiptapEditor },*/
+    data() {
+        return {
+            warnings: [
+                {
+                    value: 'red',
+                    message: 'did you mean...',
+                    options: ['read', 'reed'], // optional
+                    // default class is red
+                },
+                {
+                    value: '<script&gt;', // can use the real thing, or escape it
+                    isWord: false,
+                    message: 'you sure you wanted a tag?',
+                    overrideClass: 'underline-blue', // optional
+                },
+                {
+                    value: 'green',
+                    message: 'I really like this!',
+                    overrideClass: 'underline-green', // optional
+                },
+                {
+                    value: 'orange',
+                    message: 'this is a bad idea!',
+                    overrideClass: 'underline-orange', // optional
+                },
+            ],
+            localtext:
+                '&lt;script&gt; welcome to tiptap editor, here is a red mark blue with suggestions. You can also to blue, orange, and green!!',
+        };
+    },
+};
+</script>
+
+<style></style>

package/src/index.js

@@ -0,0 +1,3 @@
+import '@babel/polyfill';
+import TiptapEditor from './tiptap-editor.vue';
+export default TiptapEditor;

package/src/main.js

@@ -0,0 +1,8 @@
+// import '@babel/polyfill';
+import Vue from 'vue';
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+new Vue({
+    render: (h) => h(App),
+}).$mount('#app');

package/src/main.js~

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+import Dev from 'dev.vue';
+Vue.config.productionTip = false;
+
+new Vue({
+    render: function(h) {
+        h(Dev);
+    },
+}).$mount('#app');

package/src/max-character-count.js

@@ -0,0 +1,48 @@
+import { Extension, Plugin, PluginKey } from 'tiptap';
+
+// For some reason the empty edit area has a size of 2
+function realSize(size) {
+    return size - 2;
+}
+
+export default class MaxCharacterCount extends Extension {
+    get name() {
+        return 'maxCharacterCount';
+    }
+
+    get defaultOptions() {
+        return {
+            maxCharacterCount: 100,
+            onChange: () => {},
+        };
+    }
+
+    get plugins() {
+        const self = this;
+
+        return [
+            new Plugin({
+                key: new PluginKey('maxCharacterCount'),
+                filterTransaction: (transaction, state) => {
+                    if (self.options.maxCharacterCount !== null && transaction.docChanged) {
+                        const step = transaction.steps[0].toJSON();
+
+                        return (
+                            realSize(state.doc.content.size) < self.options.maxCharacterCount ||
+                            step.from < step.to || // let deletes through
+                            step.stepType !== 'replace' // let none adds through
+                        );
+                    }
+                    return true;
+                },
+                view() {
+                    return {
+                        update: (view, prevState) => {
+                            self.options.onChange(realSize(view.state.doc.content.size));
+                        },
+                    };
+                },
+            }),
+        ];
+    }
+}

package/src/max-character-count.js~

@@ -0,0 +1,33 @@
+import { Extension, Plugin, PluginKey } from 'tiptap';
+
+export default class MaxCharacterCount extends Extension {
+    get name() {
+        return 'max Character Count';
+    }
+
+    get defaultOptions() {
+        return {
+            maxCharacterCount: 100,
+            onChange: () => {},
+        };
+    }
+
+    get plugins() {
+        const self = this;
+
+        return [
+            new Plugin({
+                key: new PluginKey('maxCharacterCount'),
+                filterTransaction: (transaction, state) => {
+                    if (self.options.maxCharacterCount !== null) {
+                        return state.doc.content.size < self.options.maxCharacterCount;
+                    }
+                    return true;
+                },
+                appendTransaction: (transactions, oldState, newState) => {
+                    self.options.onChange(newState.doc.content.size);
+                },
+            }),
+        ];
+    }
+}