├── src ├── global.d.ts ├── lib │ ├── index.js │ ├── sass │ │ └── _mixins.scss │ ├── icons │ │ ├── IconHeading.svelte │ │ ├── IconParagraph.svelte │ │ ├── IconCode.svelte │ │ └── IconQuote.svelte │ ├── Float.svelte │ ├── Tooltip.svelte │ └── Editor.svelte ├── routes │ ├── __layout.svelte │ ├── api.svelte │ ├── index.svelte │ └── styling.svelte └── app.html ├── .gitignore ├── static └── favicon.png ├── .prettierrc ├── svelte.config.js ├── .github └── workflows │ ├── check.yml │ └── publish.yml ├── .eslintrc.cjs ├── tsconfig.json ├── LICENSE ├── .all-contributorsrc ├── package.json └── README.md /src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/lib/index.js: -------------------------------------------------------------------------------- 1 | export { default as OmniaEditor } from './Editor.svelte'; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TorstenDittmann/omnia-editor/HEAD/static/favicon.png -------------------------------------------------------------------------------- /src/lib/sass/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin on-mobile { 2 | @media (max-width: 690px) { 3 | @content; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /src/lib/icons/IconHeading.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/lib/icons/IconParagraph.svelte: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import preprocess from 'svelte-preprocess'; 2 | import adapter from '@sveltejs/adapter-static'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | preprocess: preprocess(), 7 | kit: { 8 | target: '#editor', 9 | adapter: adapter() 10 | } 11 | }; 12 | 13 | export default config; 14 | -------------------------------------------------------------------------------- /src/lib/icons/IconCode.svelte: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /.github/workflows/check.yml: -------------------------------------------------------------------------------- 1 | name: Check 2 | 3 | on: pull_request 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v1 10 | - uses: actions/setup-node@v1 11 | with: 12 | node-version: 16 13 | registry-url: https://registry.npmjs.org/ 14 | - run: npm ci 15 | - run: npm run check 16 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish 2 | 3 | on: 4 | release: 5 | types: [published] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v1 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 16 15 | registry-url: https://registry.npmjs.org/ 16 | - run: npm ci 17 | - run: npm run package 18 | - run: cd package && npm publish --access public 19 | env: 20 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 21 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], 5 | plugins: ['svelte3', '@typescript-eslint'], 6 | ignorePatterns: ['*.cjs'], 7 | overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], 8 | settings: { 9 | 'svelte3/typescript': () => require('typescript') 10 | }, 11 | parserOptions: { 12 | sourceType: 'module', 13 | ecmaVersion: 2019 14 | }, 15 | env: { 16 | browser: true, 17 | es2017: true, 18 | node: true 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /src/routes/__layout.svelte: -------------------------------------------------------------------------------- 1 |

2 | 7 |

8 | 9 |

10 | 11 |

12 | 13 | 33 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 20 | %svelte.head% 21 | 22 | 23 |

%svelte.body%

24 | 25 | 26 | -------------------------------------------------------------------------------- /src/lib/icons/IconQuote.svelte: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | "module": "es2020", 5 | "lib": ["es2020", "DOM"], 6 | "target": "es2020", 7 | /** 8 | svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript 9 | to enforce using \`import type\` instead of \`import\` for Types. 10 | */ 11 | "importsNotUsedAsValues": "error", 12 | "isolatedModules": true, 13 | "resolveJsonModule": true, 14 | /** 15 | To have warnings/errors of the Svelte compiler at the correct position, 16 | enable source maps by default. 17 | */ 18 | "sourceMap": true, 19 | "esModuleInterop": true, 20 | "skipLibCheck": true, 21 | "forceConsistentCasingInFileNames": true, 22 | "baseUrl": ".", 23 | "allowJs": true, 24 | "checkJs": true, 25 | "paths": { 26 | "$lib": ["src/lib"], 27 | "$lib/*": ["src/lib/*"] 28 | } 29 | }, 30 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"] 31 | } 32 | -------------------------------------------------------------------------------- /src/routes/api.svelte: -------------------------------------------------------------------------------- 1 | 19 | 20 |

Output

21 | 22 | 23 | {#if output} 24 |

25 | {/if}
26 | <OmniaEditor bind:this={editor} {value} />
27 | 
28 | <h1>History</h1>
29 | 
30 | <button on:click={editorCount.undo}>Undo</button>
31 | <button on:click={editorCount.redo}>Redo</button>
32 | <OmniaEditor bind:this={editorCount} {value} />
33 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Torsten Dittmann
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |

--------------------------------------------------------------------------------
/.all-contributorsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [
 3 |     "README.md"
 4 |   ],
 5 |   "imageSize": 100,
 6 |   "commit": false,
 7 |   "contributors": [
 8 |     {
 9 |       "login": "AntonyBoucher",
10 |       "name": "AntonyBoucher",
11 |       "avatar_url": "https://avatars3.githubusercontent.com/u/69065091?v=4",
12 |       "profile": "https://github.com/AntonyBoucher",
13 |       "contributions": [
14 |         "code"
15 |       ]
16 |     },
17 |     {
18 |       "login": "TorstenDittmann",
19 |       "name": "Torsten Dittmann",
20 |       "avatar_url": "https://avatars1.githubusercontent.com/u/1759475?v=4",
21 |       "profile": "https://torstendittmann.now.sh",
22 |       "contributions": [
23 |         "test",
24 |         "code"
25 |       ]
26 |     },
27 |     {
28 |       "login": "dennistobar",
29 |       "name": "Dennis Tobar",
30 |       "avatar_url": "https://avatars1.githubusercontent.com/u/1218182?v=4",
31 |       "profile": "https://twitter.com/dennistobar",
32 |       "contributions": [
33 |         "code"
34 |       ]
35 |     }
36 |   ],
37 |   "contributorsPerLine": 7,
38 |   "projectName": "omnia-editor",
39 |   "projectOwner": "TorstenDittmann",
40 |   "repoType": "github",
41 |   "repoHost": "https://github.com",
42 |   "skipCi": true
43 | }
44 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "omnia-editor",
 3 | 	"version": "1.0.0-beta.1",
 4 | 	"scripts": {
 5 | 		"dev": "svelte-kit dev",
 6 | 		"build": "svelte-kit build",
 7 | 		"preview": "svelte-kit preview",
 8 | 		"package": "svelte-kit package",
 9 | 		"check": "svelte-check --tsconfig ./tsconfig.json",
10 | 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
11 | 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
12 | 		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
13 | 	},
14 | 	"devDependencies": {
15 | 		"@sveltejs/adapter-static": "^1.0.0-next.21",
16 | 		"@sveltejs/kit": "next",
17 | 		"@typescript-eslint/eslint-plugin": "^5.6.0",
18 | 		"@typescript-eslint/parser": "^5.6.0",
19 | 		"eslint": "^8.4.0",
20 | 		"eslint-config-prettier": "^8.3.0",
21 | 		"eslint-plugin-svelte3": "^3.2.1",
22 | 		"prettier": "^2.4.1",
23 | 		"prettier-plugin-svelte": "^2.4.0",
24 | 		"sass": "^1.43.4",
25 | 		"svelte": "^3.42.6",
26 | 		"svelte-check": "^2.2.6",
27 | 		"svelte-preprocess": "^4.9.4",
28 | 		"svelte2tsx": "^0.4.10",
29 | 		"tslib": "^2.3.1",
30 | 		"typescript": "^4.4.3"
31 | 	},
32 | 	"type": "module",
33 | 	"dependencies": {
34 | 		"@tiptap/core": "*",
35 | 		"@tiptap/extension-bubble-menu": "*",
36 | 		"@tiptap/extension-floating-menu": "*",
37 | 		"@tiptap/extension-focus": "*",
38 | 		"@tiptap/extension-history": "*",
39 | 		"@tiptap/extension-placeholder": "*",
40 | 		"@tiptap/extension-text-align": "*",
41 | 		"@tiptap/starter-kit": "*"
42 | 	}
43 | }
44 |

--------------------------------------------------------------------------------
/src/lib/Float.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import type { Editor } from '@tiptap/core';
 3 | 	import IconHeading from './icons/IconHeading.svelte';
 4 | 	import IconCode from './icons/IconCode.svelte';
 5 | 	import IconParagraph from './icons/IconParagraph.svelte';
 6 | 	import IconQuote from './icons/IconQuote.svelte';
 7 | 
 8 | 	export let editor: Editor = undefined;
 9 | 	export let tooltip: boolean = false;
10 | </script>
11 | 
12 | <div class="omnia-create" class:tooltip>
13 | 	{#if editor}
14 | 		<button
15 | 			on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
16 | 			class:active={editor.isActive('heading', { level: 1 })}
17 | 		>
18 | 			<IconHeading />
19 | 		</button>
20 | 		<button
21 | 			on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
22 | 			class:active={editor.isActive('heading', { level: 2 })}
23 | 		>
24 | 			<IconHeading />
25 | 		</button>
26 | 		<button
27 | 			on:click={() => editor.chain().focus().toggleBlockquote().run()}
28 | 			class:active={editor.isActive('blockquote')}
29 | 		>
30 | 			<IconQuote />
31 | 		</button>
32 | 		<button
33 | 			on:click={() => editor.chain().focus().toggleCodeBlock().run()}
34 | 			class:active={editor.isActive('codeBlock')}
35 | 		>
36 | 			<IconCode />
37 | 		</button>
38 | 		<button
39 | 			on:click={() => editor.chain().focus().setParagraph().run()}
40 | 			class:active={editor.isActive('paragraph')}
41 | 		>
42 | 			<IconParagraph />
43 | 		</button>
44 | 	{/if}
45 | </div>
46 | 
47 | <style lang="scss">
48 | 	.omnia-create {
49 | 		display: flex;
50 | 		flex-wrap: wrap;
51 | 		flex-direction: row;
52 | 		justify-content: center;
53 | 		align-items: auto;
54 | 		align-content: start;
55 | 
56 | 		&.tooltip {
57 | 			background-color: white;
58 | 			filter: drop-shadow(0 0 0.1rem grey);
59 | 		}
60 | 	}
61 | 
62 | 	button {
63 | 		flex: 0 0 auto;
64 | 		background: none;
65 | 		border: none;
66 | 		cursor: pointer;
67 | 		transition: transform 0.1s;
68 | 		opacity: 0.4;
69 | 
70 | 		&.active,
71 | 		&:hover:not(:focus) {
72 | 			opacity: 1;
73 | 		}
74 | 	}
75 | 	button:hover {
76 | 		transform: scale(1.2);
77 | 	}
78 | </style>
79 |

--------------------------------------------------------------------------------
/src/lib/Tooltip.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import type { Editor } from '@tiptap/core';
  3 | 	import IconHeading from './icons/IconHeading.svelte';
  4 | 	import IconCode from './icons/IconCode.svelte';
  5 | 	import IconParagraph from './icons/IconParagraph.svelte';
  6 | 	import IconQuote from './icons/IconQuote.svelte';
  7 | 
  8 | 	export let editor: Editor = undefined;
  9 | </script>
 10 | 
 11 | <div class="omnia-tooltip">
 12 | 	{#if editor}
 13 | 		<button
 14 | 			on:click={() => editor.chain().focus().toggleBold().run()}
 15 | 			class:active={editor.isActive('bold')}
 16 | 		>
 17 | 			Bold
 18 | 		</button>
 19 | 		<button
 20 | 			on:click={() => editor.chain().focus().toggleItalic().run()}
 21 | 			class:active={editor.isActive('italic')}
 22 | 		>
 23 | 			Italic
 24 | 		</button>
 25 | 		<button
 26 | 			on:click={() => editor.chain().focus().toggleStrike().run()}
 27 | 			class:active={editor.isActive('strike')}
 28 | 		>
 29 | 			Strike
 30 | 		</button>
 31 | 		<button
 32 | 			on:click={() => editor.chain().focus().setTextAlign('left').run()}
 33 | 			class:active={editor.isActive('strike')}
 34 | 		>
 35 | 			Left
 36 | 		</button>
 37 | 		<button
 38 | 			on:click={() => editor.chain().focus().setTextAlign('center').run()}
 39 | 			class:active={editor.isActive('strike')}
 40 | 		>
 41 | 			Center
 42 | 		</button>
 43 | 		<button
 44 | 			on:click={() => editor.chain().focus().setTextAlign('right').run()}
 45 | 			class:active={editor.isActive('strike')}
 46 | 		>
 47 | 			Right
 48 | 		</button>
 49 | 
 50 | 		<span>|</span>
 51 | 		<button
 52 | 			on:click={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
 53 | 			class:active={editor.isActive('heading', { level: 1 })}
 54 | 		>
 55 | 			<IconHeading />
 56 | 		</button>
 57 | 		<button
 58 | 			on:click={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
 59 | 			class:active={editor.isActive('heading', { level: 2 })}
 60 | 		>
 61 | 			<IconHeading />
 62 | 		</button>
 63 | 		<button
 64 | 			on:click={() => editor.chain().focus().toggleCodeBlock().run()}
 65 | 			class:active={editor.isActive('codeBlock')}
 66 | 		>
 67 | 			<IconCode />
 68 | 		</button>
 69 | 		<button
 70 | 			on:click={() => editor.chain().focus().setParagraph().run()}
 71 | 			class:active={editor.isActive('paragraph')}
 72 | 		>
 73 | 			<IconParagraph />
 74 | 		</button>
 75 | 		<button
 76 | 			on:click={() => editor.chain().focus().toggleBlockquote().run()}
 77 | 			class:active={editor.isActive('blockquote')}
 78 | 		>
 79 | 			<IconQuote />
 80 | 		</button>
 81 | 	{/if}
 82 | </div>
 83 | 
 84 | <style lang="scss">
 85 | 	.omnia-tooltip {
 86 | 		display: flex;
 87 | 		flex-wrap: wrap;
 88 | 		flex-direction: row;
 89 | 		justify-content: center;
 90 | 		align-items: auto;
 91 | 		align-content: start;
 92 | 		background-color: var(--omnia-editor-bg-color);
 93 | 		color: var(--omnia-editor-text-color);
 94 | 		filter: drop-shadow(0 0 0.1rem grey);
 95 | 	}
 96 | 
 97 | 	button {
 98 | 		flex: 0 0 auto;
 99 | 		background: none;
100 | 		border: none;
101 | 		cursor: pointer;
102 | 		transition: transform 0.1s;
103 | 		opacity: 0.4;
104 | 		color: var(--omnia-editor-text-color);
105 | 
106 | 		&.active,
107 | 		&:hover:not(:focus) {
108 | 			opacity: 1;
109 | 		}
110 | 
111 | 		:global(svg) {
112 | 			fill: var(--omnia-editor-text-color);
113 | 		}
114 | 	}
115 | 	button:hover {
116 | 		transform: scale(1.2);
117 | 	}
118 | </style>
119 |

--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
1 | <script lang="ts">
2 | 	import { OmniaEditor } from '$lib';
3 | 
4 | 	let value =
5 | 		'<h1 style="text-align: center">omnia-editor</h1><p style="text-align: center">A lightweight open source block style editor built for the modern web.</p><h2 style="text-align: center">Installation</h2><p style="text-align: center"><em>npm i omnia-editor</em></p><h2 style="text-align: center">Usage</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Blandit libero volutpat sed cras. Purus semper eget duis at. Mi eget mauris pharetra et ultrices neque. Aliquet bibendum enim facilisis gravida neque convallis. Tellus id interdum velit laoreet id. Adipiscing commodo elit at imperdiet dui accumsan sit amet nulla. Magna eget est lorem ipsum dolor. Quam quisque id diam vel quam elementum pulvinar. Amet venenatis urna cursus eget nunc scelerisque viverra. Felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Dui ut ornare lectus sit. Nulla facilisi cras fermentum odio eu feugiat. A erat nam at lectus urna. Nam aliquam sem et tortor consequat. Mi proin sed libero enim sed faucibus turpis in. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Ultricies mi eget mauris pharetra et ultrices. Semper viverra nam libero justo. Tempus quam pellentesque nec nam.</p><h1 style="text-align: center">Lorem Ipsum</h1><p>Id donec ultrices tincidunt arcu non sodales. Eget mauris pharetra et ultrices neque ornare aenean. Risus commodo viverra maecenas accumsan lacus. Vitae tempus quam pellentesque nec nam aliquam sem et. Mauris nunc congue nisi vitae suscipit tellus. Commodo ullamcorper a lacus vestibulum. Auctor augue mauris augue neque gravida in fermentum. Dictumst quisque sagittis purus sit amet. Convallis convallis tellus id interdum velit laoreet id. Scelerisque eu ultrices vitae auctor eu augue. Eu non diam phasellus vestibulum lorem sed risus ultricies tristique. Nec ullamcorper sit amet risus nullam. Euismod lacinia at quis risus.</p><p>Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Est ultricies integer quis auctor. Cum sociis natoque penatibus et magnis dis parturient. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ut placerat orci nulla pellentesque dignissim enim. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Sit amet volutpat consequat mauris nunc congue nisi vitae suscipit. Fermentum odio eu feugiat pretium nibh ipsum. Aliquet nibh praesent tristique magna sit. Porttitor eget dolor morbi non arcu risus quis varius quam. Diam in arcu cursus euismod quis viverra nibh. Mattis pellentesque id nibh tortor id aliquet.</p><p>Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Tempus iaculis urna id volutpat lacus laoreet non. Orci a scelerisque purus semper eget duis at tellus. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. Ut etiam sit amet nisl. Id semper risus in hendrerit gravida rutrum quisque non tellus. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat. Vitae sapien pellentesque habitant morbi tristique senectus. Gravida quis blandit turpis cursus in hac. Lacus viverra vitae congue eu consequat ac felis. Vitae justo eget magna fermentum iaculis eu. Eros donec ac odio tempor. Lacus viverra vitae congue eu. Pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Maecenas accumsan lacus vel facilisis volutpat.</p>';
6 | </script>
7 | 
8 | <OmniaEditor {value} />
9 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # omnia-editor
  2 | 
  3 | [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
  4 | 
  5 | 
  6 | ## Usage in Svelte
  7 | 
  8 | ```bash
  9 | npm i omnia-editor
 10 | # or
 11 | yarn add omnia-editor
 12 | ```
 13 | 
 14 | ```svelte
 15 | <script>
 16 | import { OmniaEditor } from "omnia-editor";
 17 | </script>
 18 | 
 19 | <OmniaEditor />
 20 | ```
 21 | 
 22 | ## Properties
 23 | 
 24 | ### **value**_: string;_
 25 | Initial value of the content.
 26 | 
 27 | ### **editor**_: Editor;_
 28 | TipTap instance of the Editor.
 29 | 
 30 | ### **spellcheck**_: boolean;_
 31 | Use spellcheck.
 32 | 
 33 | ## Methods
 34 | 
 35 | ### **getJSON()**_: Object;_
 36 | Get the document as JSON.
 37 | ### **getHTML()**_: string;_
 38 | Get the document as HTML.
 39 | 
 40 | ### **getCharacterCount()**_: number;_
 41 | Get the number of characters for the current document.
 42 | 
 43 | ### **isFocused()**_: boolean;_
 44 | Returns `true` when Editor is focused.
 45 | 
 46 | ### **isEmpty()**_: boolean;_
 47 | Returns `true` if there is no content.
 48 | 
 49 | ### **blur()**_: boolean;_
 50 | Removes focus from the editor.
 51 | 
 52 | ### **focus(position)**_: boolean;_
 53 | Focus the editor at the given position.
 54 | 
 55 | Set the focus to the editor
 56 | ```focus()```
 57 | 
 58 | Set the cursor to the first position
 59 | ```focus('start')```
 60 | 
 61 | Set the cursor to the last position
 62 | ```focus('end')```
 63 | 
 64 | Selects the whole document
 65 | ```focus('all')```
 66 | 
 67 | Set the cursor to position 10
 68 | ```focus(10)```
 69 | 
 70 | ### **undo()**_: boolean;_
 71 | Undo recent changes.
 72 | 
 73 | ### **redo()**_: boolean;_
 74 | Reapply reverted changes.
 75 | 
 76 | ### **destroy()**_: void;_
 77 | Destroy the editor.
 78 | 
 79 | ## Events
 80 | 
 81 | ### **on:init**
 82 | Triggered when the editor is initialized.
 83 | 
 84 | ### **on:focus**
 85 | Triggered when the editor is focused.
 86 | 
 87 | ### **on:blur**
 88 | Triggered when the editor looses focus.
 89 | 
 90 | ### **on:change**
 91 | Triggered when the editors content changes.
 92 | 
 93 | ## Contributors ✨
 94 | 
 95 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 96 | 
 97 | 
 98 | 
 99 | 
100 | <table>
101 |   <tr>
102 |     <td align="center"><a href="https://github.com/AntonyBoucher"><img src="https://avatars3.githubusercontent.com/u/69065091?v=4" width="100px;" alt=""/><br /><sub><b>AntonyBoucher</b></sub></a><br /><a href="https://github.com/TorstenDittmann/omnia-editor/commits?author=AntonyBoucher" title="Code">💻</a></td>
103 |     <td align="center"><a href="https://torstendittmann.now.sh"><img src="https://avatars1.githubusercontent.com/u/1759475?v=4" width="100px;" alt=""/><br /><sub><b>Torsten Dittmann</b></sub></a><br /><a href="https://github.com/TorstenDittmann/omnia-editor/commits?author=TorstenDittmann" title="Tests">⚠️</a> <a href="https://github.com/TorstenDittmann/omnia-editor/commits?author=TorstenDittmann" title="Code">💻</a></td>
104 |     <td align="center"><a href="https://twitter.com/dennistobar"><img src="https://avatars1.githubusercontent.com/u/1218182?v=4" width="100px;" alt=""/><br /><sub><b>Dennis Tobar</b></sub></a><br /><a href="https://github.com/TorstenDittmann/omnia-editor/commits?author=dennistobar" title="Code">💻</a></td>
105 |   </tr>
106 | </table>
107 | 
108 | 
109 | 
110 | 
111 | 
112 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

--------------------------------------------------------------------------------
/src/routes/styling.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | 	import { OmniaEditor } from '$lib';
 3 | 	let value =
 4 | 		'<h1 style="text-align: center">omnia-editor</h1><p style="text-align: center">A lightweight open source block style editor built for the modern web.</p><h2 style="text-align: center">Installation</h2><p style="text-align: center"><em>npm i omnia-editor</em></p><h2 style="text-align: center">Usage</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Blandit libero volutpat sed cras. Purus semper eget duis at. Mi eget mauris pharetra et ultrices neque. Aliquet bibendum enim facilisis gravida neque convallis. Tellus id interdum velit laoreet id. Adipiscing commodo elit at imperdiet dui accumsan sit amet nulla. Magna eget est lorem ipsum dolor. Quam quisque id diam vel quam elementum pulvinar. Amet venenatis urna cursus eget nunc scelerisque viverra. Felis bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Dui ut ornare lectus sit. Nulla facilisi cras fermentum odio eu feugiat. A erat nam at lectus urna. Nam aliquam sem et tortor consequat. Mi proin sed libero enim sed faucibus turpis in. Ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet. Ultricies mi eget mauris pharetra et ultrices. Semper viverra nam libero justo. Tempus quam pellentesque nec nam.</p><h1 style="text-align: center">Lorem Ipsum</h1><p>Id donec ultrices tincidunt arcu non sodales. Eget mauris pharetra et ultrices neque ornare aenean. Risus commodo viverra maecenas accumsan lacus. Vitae tempus quam pellentesque nec nam aliquam sem et. Mauris nunc congue nisi vitae suscipit tellus. Commodo ullamcorper a lacus vestibulum. Auctor augue mauris augue neque gravida in fermentum. Dictumst quisque sagittis purus sit amet. Convallis convallis tellus id interdum velit laoreet id. Scelerisque eu ultrices vitae auctor eu augue. Eu non diam phasellus vestibulum lorem sed risus ultricies tristique. Nec ullamcorper sit amet risus nullam. Euismod lacinia at quis risus.</p><p>Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Est ultricies integer quis auctor. Cum sociis natoque penatibus et magnis dis parturient. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Ut placerat orci nulla pellentesque dignissim enim. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Sit amet volutpat consequat mauris nunc congue nisi vitae suscipit. Fermentum odio eu feugiat pretium nibh ipsum. Aliquet nibh praesent tristique magna sit. Porttitor eget dolor morbi non arcu risus quis varius quam. Diam in arcu cursus euismod quis viverra nibh. Mattis pellentesque id nibh tortor id aliquet.</p><p>Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Tempus iaculis urna id volutpat lacus laoreet non. Orci a scelerisque purus semper eget duis at tellus. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. Ut etiam sit amet nisl. Id semper risus in hendrerit gravida rutrum quisque non tellus. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut placerat. Vitae sapien pellentesque habitant morbi tristique senectus. Gravida quis blandit turpis cursus in hac. Lacus viverra vitae congue eu consequat ac felis. Vitae justo eget magna fermentum iaculis eu. Eros donec ac odio tempor. Lacus viverra vitae congue eu. Pretium viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Maecenas accumsan lacus vel facilisis volutpat.</p>';
 5 | </script>
 6 | 
 7 | <div class="dark">
 8 | 	<OmniaEditor {value} />
 9 | </div>
10 | 
11 | <style>
12 | 	.dark {
13 | 		width: 100%;
14 | 		display: flex;
15 | 		justify-content: center;
16 | 		background-color: #272822;
17 | 	}
18 | 	:global(.dark .omnia-editor) {
19 | 		--omnia-editor-bg-color: #272822;
20 | 		--omnia-editor-text-color: #f8f8f2;
21 | 		max-width: 700px;
22 | 	}
23 | </style>
24 |

--------------------------------------------------------------------------------
/src/lib/Editor.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | 	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
  3 | 	import { Editor, FocusPosition } from '@tiptap/core';
  4 | 	import StarterKit from '@tiptap/starter-kit';
  5 | 	import BubbleMenu from '@tiptap/extension-bubble-menu';
  6 | 	import FloatingMenu from '@tiptap/extension-floating-menu';
  7 | 	import Focus from '@tiptap/extension-focus';
  8 | 	import TextAlign from '@tiptap/extension-text-align';
  9 | 
 10 | 	import Float from './Float.svelte';
 11 | 	import Tooltip from './Tooltip.svelte';
 12 | 
 13 | 	/**
 14 | 	 * Initial value of the content.
 15 | 	 */
 16 | 	export let value: string = '';
 17 | 	/**
 18 | 	 * TipTap instance of the Editor.
 19 | 	 */
 20 | 	export let editor: Editor = undefined;
 21 | 	/**
 22 | 	 * Use spellcheck.
 23 | 	 */
 24 | 	export let spellcheck: boolean = false;
 25 | 	/**
 26 | 	 * Get the document as JSON.
 27 | 	 */
 28 | 	export const getJSON = () => editor?.getJSON();
 29 | 	/**
 30 | 	 * Get the document as HTML.
 31 | 	 */
 32 | 	export const getHTML = () => editor?.getHTML();
 33 | 	/**
 34 | 	 * Get the number of characters for the current document.
 35 | 	 */
 36 | 	export const getCharacterCount = () => editor?.getCharacterCount();
 37 | 	/**
 38 | 	 * Returns `true` when Editor is focused.
 39 | 	 */
 40 | 	export const isFocused = () => editor?.isFocused;
 41 | 	/**
 42 | 	 * Returns `true` if there is no content.
 43 | 	 */
 44 | 	export const isEmpty = () => editor?.isEmpty;
 45 | 	/**
 46 | 	 * Removes focus from the editor.
 47 | 	 */
 48 | 	export const blur = () => editor?.commands.blur();
 49 | 	/**
 50 | 	 * Focus the editor at the given position.
 51 | 	 *
 52 | 	 * @param position
 53 | 	 * Set the focus to the editor
 54 | 	 * focus()
 55 | 	 *
 56 | 	 * Set the cursor to the first position
 57 | 	 * focus('start')
 58 | 	 *
 59 | 	 * Set the cursor to the last position
 60 | 	 * focus('end')
 61 | 	 *
 62 | 	 * Selects the whole document
 63 | 	 * focus('all')
 64 | 	 *
 65 | 	 * Set the cursor to position 10
 66 | 	 * focus(10)
 67 | 	 */
 68 | 	export const focus = (position?: FocusPosition) => editor?.commands.focus(position);
 69 | 	/**
 70 | 	 * Undo recent changes.
 71 | 	 */
 72 | 	export const undo = () => editor?.commands.undo();
 73 | 	/**
 74 | 	 * Reapply reverted changes
 75 | 	 */
 76 | 	export const redo = () => editor?.commands.redo();
 77 | 	/**
 78 | 	 * Destroy the editor.
 79 | 	 */
 80 | 	export const destroy = () => editor?.destroy();
 81 | 
 82 | 	const dispatch = createEventDispatcher();
 83 | 
 84 | 	let element: HTMLElement;
 85 | 	let floating: HTMLElement;
 86 | 	let tooltip: HTMLElement;
 87 | 
 88 | 	onMount(() => {
 89 | 		editor = new Editor({
 90 | 			element: element,
 91 | 			extensions: [
 92 | 				StarterKit,
 93 | 				BubbleMenu.configure({
 94 | 					element: tooltip,
 95 | 					tippyOptions: {
 96 | 						placement: 'bottom'
 97 | 					}
 98 | 				}),
 99 | 				FloatingMenu.configure({
100 | 					element: floating
101 | 				}),
102 | 				Focus.configure({
103 | 					className: 'focus'
104 | 				}),
105 | 				TextAlign.configure({
106 | 					types: ['heading', 'paragraph']
107 | 				})
108 | 			],
109 | 			content: value,
110 | 			onCreate: () => dispatch('init'),
111 | 			onFocus: () => dispatch('focus'),
112 | 			onBlur: () => dispatch('blur'),
113 | 			onUpdate: () => dispatch('change'),
114 | 			onTransaction: () => {
115 | 				// force re-render so `editor.isActive` works as expected
116 | 				editor = editor;
117 | 			}
118 | 		});
119 | 	});
120 | 
121 | 	onDestroy(() => {
122 | 		if (editor) {
123 | 			editor.destroy();
124 | 			editor = null;
125 | 		}
126 | 	});
127 | </script>
128 | 
129 | <div class="omnia-editor">
130 | 	<div
131 | 		{spellcheck}
132 | 		bind:this={element}
133 | 		autocapitalize="off"
134 | 		autocorrect={spellcheck ? 'on' : 'off'}
135 | 	>
136 | 		<div class="ProseMirror" />
137 | 	</div>
138 | 	<div bind:this={floating}>
139 | 		<Float {editor} />
140 | 	</div>
141 | 	<div bind:this={tooltip}>
142 | 		<Tooltip {editor} />
143 | 	</div>
144 | </div>
145 | 
146 | <style lang="scss" global>
147 | 	@import 'sass/mixins';
148 | 
149 | 	.omnia-editor {
150 | 		--omnia-editor-bg-color: white;
151 | 		--omnia-editor-text-color: black;
152 | 	}
153 | 
154 | 	.ProseMirror {
155 | 		width: 100%;
156 | 		margin-left: auto;
157 | 		margin-right: auto;
158 | 		text-align: justify;
159 | 		background-color: var(--omnia-editor-bg-color);
160 | 		color: var(--omnia-editor-text-color);
161 | 		outline: 0;
162 | 
163 | 		> * {
164 | 			font-family: inherit;
165 | 		}
166 | 
167 | 		> p,
168 | 		blockquote {
169 | 			line-height: 2.5rem;
170 | 			padding: 0 1rem;
171 | 
172 | 			@include on-mobile {
173 | 				padding: 0;
174 | 				line-height: 1.5rem;
175 | 			}
176 | 		}
177 | 
178 | 		> blockquote {
179 | 			text-align: center;
180 | 			font-style: italic;
181 | 		}
182 | 
183 | 		&.ProseMirror-focused {
184 | 			> * {
185 | 				transition: opacity 0.1s linear;
186 | 				&:not(.focus) {
187 | 					opacity: 0.4;
188 | 				}
189 | 			}
190 | 		}
191 | 	}
192 | </style>
193 |

--------------------------------------------------------------------------------