From 27e36ed903cfff2ecff500143bb62d39d13cfa44 Mon Sep 17 00:00:00 2001 From: kom-senapati Date: Tue, 30 Jul 2024 10:03:56 +0530 Subject: [PATCH 1/4] feat: added extension for arrow conversion (#915) --- .../core/src/editor/BlockNoteExtensions.ts | 3 +++ .../ArrowConversionExtension.ts | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 packages/core/src/extensions/ArrowConversion/ArrowConversionExtension.ts diff --git a/packages/core/src/editor/BlockNoteExtensions.ts b/packages/core/src/editor/BlockNoteExtensions.ts index b64eccdbe9..8c9ef5d594 100644 --- a/packages/core/src/editor/BlockNoteExtensions.ts +++ b/packages/core/src/editor/BlockNoteExtensions.ts @@ -11,6 +11,7 @@ import { History } from "@tiptap/extension-history"; import { Link } from "@tiptap/extension-link"; import { Text } from "@tiptap/extension-text"; import * as Y from "yjs"; +import { ArrowConversionExtension } from "../extensions/ArrowConversion/ArrowConversionExtension"; import { createCopyToClipboardExtension } from "../api/exporters/copyExtension"; import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension"; import { createDropFileExtension } from "../api/parsers/fileDropExtension"; @@ -91,6 +92,8 @@ export const getBlockNoteExtensions = < return styleSpec.implementation.mark; }), + ArrowConversionExtension, + TextColorExtension, BackgroundColorExtension, diff --git a/packages/core/src/extensions/ArrowConversion/ArrowConversionExtension.ts b/packages/core/src/extensions/ArrowConversion/ArrowConversionExtension.ts new file mode 100644 index 0000000000..abef46c69e --- /dev/null +++ b/packages/core/src/extensions/ArrowConversion/ArrowConversionExtension.ts @@ -0,0 +1,18 @@ +import { Extension } from "@tiptap/core"; + +export const ArrowConversionExtension = Extension.create({ + name: 'arrowConversion', + + addInputRules() { + return [ + { + find: /->/g, + handler: ({ state, range, chain }) => { + const { from, to } = range; + const tr = state.tr.replaceWith(from, to, state.schema.text('→')); + chain().insertContent(tr).run(); + }, + }, + ]; + }, +}) From eeb1bc0320bf697d7feab11136667ee36f43cc53 Mon Sep 17 00:00:00 2001 From: kom-senapati Date: Tue, 30 Jul 2024 17:51:48 +0530 Subject: [PATCH 2/4] delete: removing extension from core --- .../core/src/editor/BlockNoteExtensions.ts | 3 --- .../ArrowConversionExtension.ts | 18 ------------------ 2 files changed, 21 deletions(-) delete mode 100644 packages/core/src/extensions/ArrowConversion/ArrowConversionExtension.ts diff --git a/packages/core/src/editor/BlockNoteExtensions.ts b/packages/core/src/editor/BlockNoteExtensions.ts index 8c9ef5d594..b64eccdbe9 100644 --- a/packages/core/src/editor/BlockNoteExtensions.ts +++ b/packages/core/src/editor/BlockNoteExtensions.ts @@ -11,7 +11,6 @@ import { History } from "@tiptap/extension-history"; import { Link } from "@tiptap/extension-link"; import { Text } from "@tiptap/extension-text"; import * as Y from "yjs"; -import { ArrowConversionExtension } from "../extensions/ArrowConversion/ArrowConversionExtension"; import { createCopyToClipboardExtension } from "../api/exporters/copyExtension"; import { createPasteFromClipboardExtension } from "../api/parsers/pasteExtension"; import { createDropFileExtension } from "../api/parsers/fileDropExtension"; @@ -92,8 +91,6 @@ export const getBlockNoteExtensions = < return styleSpec.implementation.mark; }), - ArrowConversionExtension, - TextColorExtension, BackgroundColorExtension, diff --git a/packages/core/src/extensions/ArrowConversion/ArrowConversionExtension.ts b/packages/core/src/extensions/ArrowConversion/ArrowConversionExtension.ts deleted file mode 100644 index abef46c69e..0000000000 --- a/packages/core/src/extensions/ArrowConversion/ArrowConversionExtension.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Extension } from "@tiptap/core"; - -export const ArrowConversionExtension = Extension.create({ - name: 'arrowConversion', - - addInputRules() { - return [ - { - find: /->/g, - handler: ({ state, range, chain }) => { - const { from, to } = range; - const tr = state.tr.replaceWith(from, to, state.schema.text('→')); - chain().insertContent(tr).run(); - }, - }, - ]; - }, -}) From 22fa1d26f3a0abbd6d9ca28944e1fd3845edc28b Mon Sep 17 00:00:00 2001 From: kom-senapati Date: Tue, 30 Jul 2024 18:55:26 +0530 Subject: [PATCH 3/4] feat: added example for arrow conversion extension --- .../01-arrow-conversion/.bnexample.json | 6 +++ .../01-arrow-conversion/App.tsx | 17 +++++++++ .../ArrowConversionExtension.ts | 18 +++++++++ .../01-arrow-conversion/README.md | 4 ++ .../01-arrow-conversion/index.html | 14 +++++++ .../01-arrow-conversion/main.tsx | 11 ++++++ .../01-arrow-conversion/package.json | 37 +++++++++++++++++++ .../01-arrow-conversion/tsconfig.json | 36 ++++++++++++++++++ .../01-arrow-conversion/vite.config.ts | 32 ++++++++++++++++ 9 files changed, 175 insertions(+) create mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/.bnexample.json create mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/App.tsx create mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/ArrowConversionExtension.ts create mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/README.md create mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/index.html create mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/main.tsx create mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/package.json create mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/tsconfig.json create mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/vite.config.ts diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/.bnexample.json b/examples/08-adding-tiptap-extensions/01-arrow-conversion/.bnexample.json new file mode 100644 index 0000000000..d199ebaef3 --- /dev/null +++ b/examples/08-adding-tiptap-extensions/01-arrow-conversion/.bnexample.json @@ -0,0 +1,6 @@ +{ + "playground": true, + "docs": false, + "author": "komsenapati", + "tags": ["Extension"] +} diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/App.tsx b/examples/08-adding-tiptap-extensions/01-arrow-conversion/App.tsx new file mode 100644 index 0000000000..94619d637c --- /dev/null +++ b/examples/08-adding-tiptap-extensions/01-arrow-conversion/App.tsx @@ -0,0 +1,17 @@ +import "@blocknote/core/fonts/inter.css"; +import { useCreateBlockNote } from "@blocknote/react"; +import { BlockNoteView } from "@blocknote/mantine"; +import "@blocknote/mantine/style.css"; +import { ArrowConversionExtension } from "./ArrowConversionExtension"; + +export default function App() { + // Creates a new editor instance. + const editor = useCreateBlockNote({ + _tiptapOptions: { + extensions: [ArrowConversionExtension] + } + }); + + // Renders the editor instance using a React component. + return ; +} diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/ArrowConversionExtension.ts b/examples/08-adding-tiptap-extensions/01-arrow-conversion/ArrowConversionExtension.ts new file mode 100644 index 0000000000..abef46c69e --- /dev/null +++ b/examples/08-adding-tiptap-extensions/01-arrow-conversion/ArrowConversionExtension.ts @@ -0,0 +1,18 @@ +import { Extension } from "@tiptap/core"; + +export const ArrowConversionExtension = Extension.create({ + name: 'arrowConversion', + + addInputRules() { + return [ + { + find: /->/g, + handler: ({ state, range, chain }) => { + const { from, to } = range; + const tr = state.tr.replaceWith(from, to, state.schema.text('→')); + chain().insertContent(tr).run(); + }, + }, + ]; + }, +}) diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/README.md b/examples/08-adding-tiptap-extensions/01-arrow-conversion/README.md new file mode 100644 index 0000000000..7248948d00 --- /dev/null +++ b/examples/08-adding-tiptap-extensions/01-arrow-conversion/README.md @@ -0,0 +1,4 @@ +# Arrow Conversion Extension + +This example shows the minimal code required to set up a BlockNote editor with arrow conversion tip tap extension in React. + diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/index.html b/examples/08-adding-tiptap-extensions/01-arrow-conversion/index.html new file mode 100644 index 0000000000..642715594a --- /dev/null +++ b/examples/08-adding-tiptap-extensions/01-arrow-conversion/index.html @@ -0,0 +1,14 @@ + + + + + + Basic Setup + + +
+ + + diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/main.tsx b/examples/08-adding-tiptap-extensions/01-arrow-conversion/main.tsx new file mode 100644 index 0000000000..f88b490fbd --- /dev/null +++ b/examples/08-adding-tiptap-extensions/01-arrow-conversion/main.tsx @@ -0,0 +1,11 @@ +// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY +import React from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; + +const root = createRoot(document.getElementById("root")!); +root.render( + + + +); diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/package.json b/examples/08-adding-tiptap-extensions/01-arrow-conversion/package.json new file mode 100644 index 0000000000..5f028d3f39 --- /dev/null +++ b/examples/08-adding-tiptap-extensions/01-arrow-conversion/package.json @@ -0,0 +1,37 @@ +{ + "name": "@blocknote/example-minimal", + "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "private": true, + "version": "0.12.4", + "scripts": { + "start": "vite", + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview", + "lint": "eslint . --max-warnings 0" + }, + "dependencies": { + "@blocknote/core": "latest", + "@blocknote/react": "latest", + "@blocknote/ariakit": "latest", + "@blocknote/mantine": "latest", + "@blocknote/shadcn": "latest", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@types/react": "^18.0.25", + "@types/react-dom": "^18.0.9", + "@vitejs/plugin-react": "^4.3.1", + "eslint": "^8.10.0", + "vite": "^5.3.4" + }, + "eslintConfig": { + "extends": [ + "../../../.eslintrc.js" + ] + }, + "eslintIgnore": [ + "dist" + ] +} \ No newline at end of file diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/tsconfig.json b/examples/08-adding-tiptap-extensions/01-arrow-conversion/tsconfig.json new file mode 100644 index 0000000000..1bd8ab3c57 --- /dev/null +++ b/examples/08-adding-tiptap-extensions/01-arrow-conversion/tsconfig.json @@ -0,0 +1,36 @@ +{ + "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": [ + "DOM", + "DOM.Iterable", + "ESNext" + ], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "composite": true + }, + "include": [ + "." + ], + "__ADD_FOR_LOCAL_DEV_references": [ + { + "path": "../../../packages/core/" + }, + { + "path": "../../../packages/react/" + } + ] +} \ No newline at end of file diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/vite.config.ts b/examples/08-adding-tiptap-extensions/01-arrow-conversion/vite.config.ts new file mode 100644 index 0000000000..f62ab20bc2 --- /dev/null +++ b/examples/08-adding-tiptap-extensions/01-arrow-conversion/vite.config.ts @@ -0,0 +1,32 @@ +// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY +import react from "@vitejs/plugin-react"; +import * as fs from "fs"; +import * as path from "path"; +import { defineConfig } from "vite"; +// import eslintPlugin from "vite-plugin-eslint"; +// https://vitejs.dev/config/ +export default defineConfig((conf) => ({ + plugins: [react()], + optimizeDeps: {}, + build: { + sourcemap: true, + }, + resolve: { + alias: + conf.command === "build" || + !fs.existsSync(path.resolve(__dirname, "../../packages/core/src")) + ? {} + : ({ + // Comment out the lines below to load a built version of blocknote + // or, keep as is to load live from sources with live reload working + "@blocknote/core": path.resolve( + __dirname, + "../../packages/core/src/" + ), + "@blocknote/react": path.resolve( + __dirname, + "../../packages/react/src/" + ), + } as any), + }, +})); From 02601e2a84eab783027a353ba65f5449261b772e Mon Sep 17 00:00:00 2001 From: yousefed Date: Wed, 31 Jul 2024 14:59:33 +0200 Subject: [PATCH 4/4] small example fixes --- docs/pages/examples/_meta.json | 3 ++- .../01-arrow-conversion/.bnexample.json | 6 ----- .../01-arrow-conversion/README.md | 4 --- .../.bnexample.json | 7 ++++++ .../01-tiptap-arrow-conversion}/App.tsx | 0 .../ArrowConversionExtension.ts | 0 .../01-tiptap-arrow-conversion/README.md | 5 ++++ .../01-tiptap-arrow-conversion}/index.html | 2 +- .../01-tiptap-arrow-conversion}/main.tsx | 0 .../01-tiptap-arrow-conversion}/package.json | 2 +- .../01-tiptap-arrow-conversion}/tsconfig.json | 0 .../vite.config.ts | 0 playground/src/examples.gen.tsx | 25 +++++++++++++++++++ 13 files changed, 41 insertions(+), 13 deletions(-) delete mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/.bnexample.json delete mode 100644 examples/08-adding-tiptap-extensions/01-arrow-conversion/README.md create mode 100644 examples/08-extensions/01-tiptap-arrow-conversion/.bnexample.json rename examples/{08-adding-tiptap-extensions/01-arrow-conversion => 08-extensions/01-tiptap-arrow-conversion}/App.tsx (100%) rename examples/{08-adding-tiptap-extensions/01-arrow-conversion => 08-extensions/01-tiptap-arrow-conversion}/ArrowConversionExtension.ts (100%) create mode 100644 examples/08-extensions/01-tiptap-arrow-conversion/README.md rename examples/{08-adding-tiptap-extensions/01-arrow-conversion => 08-extensions/01-tiptap-arrow-conversion}/index.html (86%) rename examples/{08-adding-tiptap-extensions/01-arrow-conversion => 08-extensions/01-tiptap-arrow-conversion}/main.tsx (100%) rename examples/{08-adding-tiptap-extensions/01-arrow-conversion => 08-extensions/01-tiptap-arrow-conversion}/package.json (93%) rename examples/{08-adding-tiptap-extensions/01-arrow-conversion => 08-extensions/01-tiptap-arrow-conversion}/tsconfig.json (100%) rename examples/{08-adding-tiptap-extensions/01-arrow-conversion => 08-extensions/01-tiptap-arrow-conversion}/vite.config.ts (100%) diff --git a/docs/pages/examples/_meta.json b/docs/pages/examples/_meta.json index c01af6596d..aa81bb87ad 100644 --- a/docs/pages/examples/_meta.json +++ b/docs/pages/examples/_meta.json @@ -6,5 +6,6 @@ "theming": "Theming", "interoperability": "Interoperability", "custom-schema": "Custom Schemas", - "collaboration": "Collaboration" + "collaboration": "Collaboration", + "extensions": "Extensions" } diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/.bnexample.json b/examples/08-adding-tiptap-extensions/01-arrow-conversion/.bnexample.json deleted file mode 100644 index d199ebaef3..0000000000 --- a/examples/08-adding-tiptap-extensions/01-arrow-conversion/.bnexample.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "playground": true, - "docs": false, - "author": "komsenapati", - "tags": ["Extension"] -} diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/README.md b/examples/08-adding-tiptap-extensions/01-arrow-conversion/README.md deleted file mode 100644 index 7248948d00..0000000000 --- a/examples/08-adding-tiptap-extensions/01-arrow-conversion/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# Arrow Conversion Extension - -This example shows the minimal code required to set up a BlockNote editor with arrow conversion tip tap extension in React. - diff --git a/examples/08-extensions/01-tiptap-arrow-conversion/.bnexample.json b/examples/08-extensions/01-tiptap-arrow-conversion/.bnexample.json new file mode 100644 index 0000000000..c82999398f --- /dev/null +++ b/examples/08-extensions/01-tiptap-arrow-conversion/.bnexample.json @@ -0,0 +1,7 @@ +{ + "playground": true, + "docs": true, + "author": "komsenapati", + "tags": ["Extension"], + "pro": true +} diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/App.tsx b/examples/08-extensions/01-tiptap-arrow-conversion/App.tsx similarity index 100% rename from examples/08-adding-tiptap-extensions/01-arrow-conversion/App.tsx rename to examples/08-extensions/01-tiptap-arrow-conversion/App.tsx diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/ArrowConversionExtension.ts b/examples/08-extensions/01-tiptap-arrow-conversion/ArrowConversionExtension.ts similarity index 100% rename from examples/08-adding-tiptap-extensions/01-arrow-conversion/ArrowConversionExtension.ts rename to examples/08-extensions/01-tiptap-arrow-conversion/ArrowConversionExtension.ts diff --git a/examples/08-extensions/01-tiptap-arrow-conversion/README.md b/examples/08-extensions/01-tiptap-arrow-conversion/README.md new file mode 100644 index 0000000000..83175f3aab --- /dev/null +++ b/examples/08-extensions/01-tiptap-arrow-conversion/README.md @@ -0,0 +1,5 @@ +# TipTap extension (arrow InputRule) + +This example shows how to set up a BlockNote editor with a TipTap extension that registers an InputRule to convert `->` into `→`. + +**Try it out:** Type `->` anywhere in the editor and see how it's automatically converted to a single arrow unicode character. diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/index.html b/examples/08-extensions/01-tiptap-arrow-conversion/index.html similarity index 86% rename from examples/08-adding-tiptap-extensions/01-arrow-conversion/index.html rename to examples/08-extensions/01-tiptap-arrow-conversion/index.html index 642715594a..68d9a1fd78 100644 --- a/examples/08-adding-tiptap-extensions/01-arrow-conversion/index.html +++ b/examples/08-extensions/01-tiptap-arrow-conversion/index.html @@ -5,7 +5,7 @@ - Basic Setup + TipTap extension (arrow InputRule)
diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/main.tsx b/examples/08-extensions/01-tiptap-arrow-conversion/main.tsx similarity index 100% rename from examples/08-adding-tiptap-extensions/01-arrow-conversion/main.tsx rename to examples/08-extensions/01-tiptap-arrow-conversion/main.tsx diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/package.json b/examples/08-extensions/01-tiptap-arrow-conversion/package.json similarity index 93% rename from examples/08-adding-tiptap-extensions/01-arrow-conversion/package.json rename to examples/08-extensions/01-tiptap-arrow-conversion/package.json index 5f028d3f39..974c116732 100644 --- a/examples/08-adding-tiptap-extensions/01-arrow-conversion/package.json +++ b/examples/08-extensions/01-tiptap-arrow-conversion/package.json @@ -1,5 +1,5 @@ { - "name": "@blocknote/example-minimal", + "name": "@blocknote/example-tiptap-arrow-conversion", "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", "private": true, "version": "0.12.4", diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/tsconfig.json b/examples/08-extensions/01-tiptap-arrow-conversion/tsconfig.json similarity index 100% rename from examples/08-adding-tiptap-extensions/01-arrow-conversion/tsconfig.json rename to examples/08-extensions/01-tiptap-arrow-conversion/tsconfig.json diff --git a/examples/08-adding-tiptap-extensions/01-arrow-conversion/vite.config.ts b/examples/08-extensions/01-tiptap-arrow-conversion/vite.config.ts similarity index 100% rename from examples/08-adding-tiptap-extensions/01-arrow-conversion/vite.config.ts rename to examples/08-extensions/01-tiptap-arrow-conversion/vite.config.ts diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx index eaac162755..52d5df36f3 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -968,6 +968,31 @@ } ] }, + "extensions": { + "pathFromRoot": "examples/08-extensions", + "slug": "extensions", + "projects": [ + { + "projectSlug": "tiptap-arrow-conversion", + "fullSlug": "extensions/tiptap-arrow-conversion", + "pathFromRoot": "examples/08-extensions/01-tiptap-arrow-conversion", + "config": { + "playground": true, + "docs": true, + "author": "komsenapati", + "tags": [ + "Extension" + ], + "pro": true + }, + "title": "TipTap extension (arrow InputRule)", + "group": { + "pathFromRoot": "examples/08-extensions", + "slug": "extensions" + } + } + ] + }, "vanilla-js": { "pathFromRoot": "examples/vanilla-js", "slug": "vanilla-js",