Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-10 15:25:51 +01:00
Code Issues Packages Projects Releases Activity

Convert to DLL compatible plugin (#46)

Browse Source
This commit is contained in:
Daniel Kulbe
2023-02-06 19:35:50 +01:00
committed by Tony Narlock
parent 0dbe462a9e
commit 383361733a
30 changed files with 1984 additions and 2827 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.editorconfig
View File

@@ -7,3 +7,10 @@ charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
[*.{js,jsx,ts}]
quote_type = single
[package.json]
indent_style = space
tab_width = 4

2
.eslintignore
View File

@@ -1,2 +0,0 @@
demo/*
webpack.config.js

25
.eslintrc.js
View File

@@ -4,9 +4,34 @@
module.exports = {
extends: 'ckeditor5',
root: true,
globals: {
'MathJax': true,
'katex': true,
'console': true
},
ignorePatterns: [
// Ignore the entire `build/` (the DLL build).
'build/**'
],
rules: {
// This rule disallows importing core DLL packages directly. Imports should be done using the `ckeditor5` package.
// Also, importing non-DLL packages is not allowed. If the package requires other features to work, they should be
// specified as soft-requirements.
// Read more: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-26.html#soft-requirements.
'ckeditor5-rules/ckeditor-imports': 'error',
// This rule could not be found ???
'ckeditor5-rules/use-require-for-debug-mode-imports': 'off'
},
overrides: [
{
files: [ 'tests/**/*.js', 'sample/**/*.js' ],
rules: {
// To write complex tests, you may need to import files that are not exported in DLL files by default.
// Hence, imports CKEditor 5 packages in test files are not checked.
'ckeditor5-rules/ckeditor-imports': 'off'
}
}
]
};

17
.gitattributes vendored
View File

@@ -1 +1,18 @@
* text=auto
*.htaccess eol=lf
*.cgi eol=lf
*.sh eol=lf
*.css text
*.htm text
*.html text
*.js text
*.json text
*.php text
*.txt text
*.md text
*.png -text
*.gif -text
*.jpg -text

3
.gitignore vendored
View File

@@ -1,5 +1,6 @@
node_modules/
build/
tmp/
sample/ckeditor.dist.js
package-lock.json
yarn-error.log
public

48
README.md
View File

@@ -60,8 +60,8 @@ If you get duplicated modules error, you have mismatching versions.
Use official classic or inline build as a base:
- [CKEditor 5 classic editor build](https://github.com/ckeditor/ckeditor5-build-classic)
- [CKEditor 5 inline editor build](https://github.com/ckeditor/ckeditor5-build-inline)
- [CKEditor 5 classic editor build](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-build-classic)
- [CKEditor 5 inline editor build](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-build-inline)
Install plugin with NPM or Yarn
@@ -72,7 +72,8 @@ Install plugin with NPM or Yarn
Add import into ckeditor.js file
```js
import Mathematics from 'ckeditor5-math/src/math';
import Math from 'ckeditor5-math/src/math';
import AutoformatMath from 'ckeditor5-math/src/autoformatmath';
```
Add it to built-in plugins
@@ -80,7 +81,8 @@ Add it to built-in plugins
```js
InlineEditor.builtinPlugins = [
// ...
Mathematics
Math,
AutoformatMath
];
```
@@ -101,6 +103,24 @@ InlineEditor.defaultConfig = {
**Copy theme/ckeditor5-math folder** from [https://github.com/isaul32/ckeditor5/tree/master/packages/ckeditor5-theme-lark](https://github.com/isaul32/ckeditor5/tree/master/packages/ckeditor5-theme-lark) to your lark theme repository
### Using DLL builds
Use the [official DLL build](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/dll-builds.html) and additionally load the math plugin:
```html
<script src="path/to/node_modules/isaul32/ckeditor5-math/build/math.js"></script>
<script>
CKEditor5.editorClassic.ClassicEditor
.create(editorElement, {
plugins: [
CKEditor5.math.Math,
...
],
...
});
</script>
```
## Configuration & Usage
### Plugin options
@@ -216,14 +236,30 @@ Add following lines into your build
```js
// ...
import AutoformatMathematics from 'ckeditor5-math/src/autoformatmath';
import AutoformatMath from 'ckeditor5-math/src/autoformatmath';
InlineEditor.builtinPlugins = [
// ...
AutoformatMathematics
AutoformatMath
];
```
or use it with DLL build
```html
<script src="path/to/node_modules/isaul32/ckeditor5-math/build/math.js"></script>
<script>
CKEditor5.editorInline.InlineEditorEditor
.create(editorElement, {
plugins: [
CKEditor5.math.AutoformatMath,
...
],
...
});
</script>
```
## Preview workaround
`.ck-reset_all *` css rules from ckeditor5-ui and ckeditor5-theme-lark break rendering in preview mode.

23
ckeditor5-metadata.json Normal file
View File

@@ -0,0 +1,23 @@
{
"plugins": [
{
"name": "Math",
"className": "Math",
"description": "Adds mathematical formulars to the editor.",
"path": "src/math.js",
"uiComponents": [
{
"name": "math",
"type": "Button",
"iconPath": "theme/icons/math.svg"
}
]
},
{
"name": "AutoformatMath",
"className": "AutoformatMath",
"description": "Implements autoformatting with mathematical formulas.",
"path": "src/autoformatmath.js"
}
]
}

29
demo/app.js
View File

@@ -1,29 +0,0 @@
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor";
import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold";
import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
import CKEditorInspector from "@ckeditor/ckeditor5-inspector";
import Math from "../src/math";
ClassicEditor.create(document.querySelector("#editor"), {
plugins: [Essentials, Paragraph, Bold, Italic, Math],
toolbar: ["bold", "italic", "math"],
math: {
engine: "katex",
katexRenderOptions: {
macros: {
"\\test": "\\mathrel{\\char`≠}",
},
},
},
})
.then((editor) => {
console.log("Editor was initialized", editor);
CKEditorInspector.attach(editor);
})
.catch((error) => {
console.error(error);
console.error(error.stack);
});

61
demo/index.html
View File

@@ -1,61 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CKEditor5 w/ ckeditor5-math</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.css"
integrity="sha384-L+Gq2Cso/Y2x8fX4wausgiZT8z0QPZz7OqPuz4YqAycQJyrJT9NRLpjFBD6zlOia"
crossorigin="anonymous"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js"
integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA"
crossorigin="anonymous"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/contrib/auto-render.min.js"
integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"
crossorigin="anonymous"
onload="renderMathInElement(document.body, {'macros': {'\\test': '\\mathrel{\\char`≠}'}});"
></script>
<style>
html {
text-align: center;
}
body {
max-width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<h2>
CKEditor 5 with
<a
href="https://github.com/isaul32/ckeditor5-math"
rel="noopener noreferrer"
target="_blank"
>ckeditor5-math</a
>
</h2>
<div id="editor">
<p><script type="math/tex">e=mc^2</script></p>
<p><script type="math/tex; mode=display">e=mc^2</script></p>
<p>
This should show "\test" as ≠ via katexRenderOptions.macros:
<script type="math/tex">\test</script>
</p>
<!-- Quill Style Tag -->
<p><span class="ql-formula" data-value="e=mc^2"></span></p>
</div>
</body>
</html>

72
package.json
View File

@@ -1,5 +1,5 @@
{
"name": "ckeditor5-math",
"name": "@isaul32/ckeditor5-math",
"version": "36.0.2",
"description": "Math feature for CKEditor 5.",
"keywords": [
@@ -11,41 +11,37 @@
"ckeditor5-math",
"katex"
],
"resolutions": {
"postcss-loader": "^4.3.0",
"mini-css-extract-plugin": "2.4.2"
},
"main": "src/index.js",
"dependencies": {
"@ckeditor/ckeditor5-clipboard": "^36.0.1",
"@ckeditor/ckeditor5-core": "^36.0.1",
"@ckeditor/ckeditor5-engine": "^36.0.1",
"@ckeditor/ckeditor5-inspector": "^3.0.0",
"@ckeditor/ckeditor5-ui": "^36.0.1",
"@ckeditor/ckeditor5-undo": "^36.0.1",
"@ckeditor/ckeditor5-utils": "^36.0.1",
"@ckeditor/ckeditor5-widget": "^36.0.1"
"ckeditor5": "^36.0.1"
},
"devDependencies": {
"@ckeditor/ckeditor5-basic-styles": "^36.0.1",
"@ckeditor/ckeditor5-dev-tests": "^30.0.0",
"@ckeditor/ckeditor5-editor-classic": "^36.0.1",
"@ckeditor/ckeditor5-editor-inline": "^36.0.1",
"@ckeditor/ckeditor5-essentials": "^36.0.1",
"@ckeditor/ckeditor5-paragraph": "^36.0.1",
"@ckeditor/ckeditor5-theme-lark": "^36.0.1",
"css-loader": "^5.2.7",
"eslint": "^7.1.0",
"eslint-config-ckeditor5": "^3.1.1",
"html-webpack-plugin": "^5.3.1",
"@ckeditor/ckeditor5-autoformat": ">=36.0.1",
"@ckeditor/ckeditor5-basic-styles": ">=36.0.1",
"@ckeditor/ckeditor5-block-quote": ">=36.0.1",
"@ckeditor/ckeditor5-code-block": ">=36.0.1",
"@ckeditor/ckeditor5-core": ">=36.0.1",
"@ckeditor/ckeditor5-editor-classic": ">=36.0.1",
"@ckeditor/ckeditor5-essentials": ">=36.0.1",
"@ckeditor/ckeditor5-heading": ">=36.0.1",
"@ckeditor/ckeditor5-image": ">=36.0.1",
"@ckeditor/ckeditor5-indent": ">=36.0.1",
"@ckeditor/ckeditor5-inspector": ">=4.1.0",
"@ckeditor/ckeditor5-link": ">=36.0.1",
"@ckeditor/ckeditor5-list": ">=36.0.1",
"@ckeditor/ckeditor5-media-embed": ">=36.0.1",
"@ckeditor/ckeditor5-package-tools": "^1.0.0-beta.8",
"@ckeditor/ckeditor5-paragraph": ">=36.0.1",
"@ckeditor/ckeditor5-table": ">=36.0.1",
"@ckeditor/ckeditor5-theme-lark": ">=36.0.1",
"@ckeditor/ckeditor5-upload": ">=36.0.1",
"eslint": "^7.32.0",
"eslint-config-ckeditor5": ">=4.1.1",
"http-server": "^14.1.0",
"husky": "^4.2.5",
"lint-staged": "^10.2.6",
"mini-css-extract-plugin": "^2.4.2",
"raw-loader": "^4.0.1",
"stylelint": "^13.5.0",
"stylelint-config-ckeditor5": "^2.0.1",
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^3.11.2"
"stylelint": "^13.13.1",
"stylelint-config-ckeditor5": ">=4.1.1"
},
"engines": {
"node": ">=14.0.0",
@@ -61,14 +57,20 @@
"files": [
"lang",
"src",
"theme"
"build",
"theme",
"ckeditor5-metadata.json",
"CHANGELOG.md"
],
"scripts": {
"dll:build": "ckeditor5-package-tools dll:build",
"dll:serve": "http-server ./ -o sample/dll.html",
"lint": "eslint --quiet src/**/*.js",
"lint:fix": "eslint --quiet src/**/*.js --fix",
"stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css' 'docs/**/*.css'",
"test": "node node_modules/@ckeditor/ckeditor5-dev-tests/bin/test.js",
"start": "node node_modules/.bin/webpack serve --mode development"
"stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
"test": "ckeditor5-package-tools test",
"prepare": "yarn run dll:build",
"start": "ckeditor5-package-tools start"
},
"lint-staged": {
"**/*.js": [

113
sample/ckeditor.js vendored Normal file
View File

@@ -0,0 +1,113 @@
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import CKEditorInspector from '@ckeditor/ckeditor5-inspector';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
import Code from '@ckeditor/ckeditor5-basic-styles/src/code';
import { Math, AutoformatMath } from '../src/index';
/* global document, window */
ClassicEditor
.create( document.querySelector( '#editor' ), {
math: {
engine: 'katex',
katexRenderOptions: {
macros: {
'\\test': '\\mathrel{\\char`≠}'
}
}
},
plugins: [
Math,
AutoformatMath,
Essentials,
Autoformat,
BlockQuote,
Bold,
Heading,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
Table,
TableToolbar,
CodeBlock,
Code,
Base64UploadAdapter
],
toolbar: [
'math',
'|',
'heading',
'|',
'bold',
'italic',
'link',
'code',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'uploadImage',
'blockQuote',
'insertTable',
'mediaEmbed',
'codeBlock',
'|',
'undo',
'redo'
],
image: {
toolbar: [
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
}
} )
.then( editor => {
window.editor = editor;
CKEditorInspector.attach( editor );
window.console.log( 'CKEditor 5 is ready.', editor );
} )
.catch( err => {
window.console.error( err.stack );
} );

156
sample/dll.html Normal file
View File

@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="https://ckeditor.com/docs/ckeditor5/latest/assets/img/favicons/32x32.png" sizes="32x32">
<meta charset="utf-8">
<title>CKEditor 5 with ckeditor5-math – DLL Sample</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.css"
integrity="sha384-L+Gq2Cso/Y2x8fX4wausgiZT8z0QPZz7OqPuz4YqAycQJyrJT9NRLpjFBD6zlOia"
crossorigin="anonymous"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js"
integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA"
crossorigin="anonymous"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/contrib/auto-render.min.js"
integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"
crossorigin="anonymous"
onload="renderMathInElement(document.body, {'macros': {'\\test': '\\mathrel{\\char`≠}'}});"
></script>
<style>body { max-width: 800px; margin: 20px auto; }</style>
</head>
<body>
<h1>CKEditor 5 with ckeditor5-math – DLL Sample</h1>
<div id="editor">
<h2>Production sample</h2>
<p>
This is a demo of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a> that loads the <code>Math</code> and <code>AutoformatMath</code> plugin.
</p>
<p>
<code>Math</code> inserts mathematical formulas into the editor. You can click the CKEditor 5 Math icon in the toolbar and see the results.
</p>
<p><script type="math/tex">e=mc^2</script></p>
<p><script type="math/tex; mode=display">e=mc^2</script></p>
<p>
This should show "\test" as ≠ via katexRenderOptions.macros:
<script type="math/tex">\test</script>
</p>
<!-- Quill Style Tag -->
<p><span class="ql-formula" data-value="e=mc^2"></span></p>
</div>
<!-- DLL builds are served from the `node_modules/` directory -->
<script src="../node_modules/ckeditor5/build/ckeditor5-dll.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-editor-classic/build/editor-classic.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-code-block/build/code-block.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-essentials/build/essentials.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-basic-styles/build/basic-styles.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-heading/build/heading.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-autoformat/build/autoformat.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-block-quote/build/block-quote.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-image/build/image.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-link/build/link.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-indent/build/indent.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-media-embed/build/media-embed.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-list/build/list.js"></script>
<script src="../node_modules/@ckeditor/ckeditor5-table/build/table.js"></script>
<!-- The "ckeditor5-math" package DLL build is served from the `build/` directory -->
<script src="../build/math.js"></script>
<script>
console.log( 'Objects exported by the DLL build:', CKEditor5.math );
CKEditor5.editorClassic.ClassicEditor
.create( document.querySelector( '#editor' ), {
math: {
engine: 'katex',
katexRenderOptions: {
macros: {
'\\test': '\\mathrel{\\char`≠}'
}
}
},
plugins: [
CKEditor5.math.Math,
CKEditor5.math.AutoformatMath,
CKEditor5.essentials.Essentials,
CKEditor5.autoformat.Autoformat,
CKEditor5.blockQuote.BlockQuote,
CKEditor5.basicStyles.Bold,
CKEditor5.heading.Heading,
CKEditor5.image.Image,
CKEditor5.image.ImageCaption,
CKEditor5.image.ImageStyle,
CKEditor5.image.ImageToolbar,
CKEditor5.image.ImageUpload,
CKEditor5.indent.Indent,
CKEditor5.basicStyles.Italic,
CKEditor5.link.Link,
CKEditor5.list.List,
CKEditor5.mediaEmbed.MediaEmbed,
CKEditor5.paragraph.Paragraph,
CKEditor5.table.Table,
CKEditor5.table.TableToolbar,
CKEditor5.codeBlock.CodeBlock,
CKEditor5.basicStyles.Code,
CKEditor5.upload.Base64UploadAdapter
],
toolbar: [
'math',
'|',
'heading',
'|',
'bold',
'italic',
'link',
'code',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'uploadImage',
'blockQuote',
'insertTable',
'mediaEmbed',
'codeBlock',
'|',
'undo',
'redo'
],
image: {
toolbar: [
'imageStyle:inline',
'imageStyle:block',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
}
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( 'There was a problem initializing the editor.', error );
} );
</script>
</body>
</html>

74
sample/index.html Normal file
View File

@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="https://ckeditor.com/docs/ckeditor5/latest/assets/img/favicons/32x32.png" sizes="32x32">
<meta charset="utf-8">
<title>CKEditor 5 with ckeditor5-math – Development Sample</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.css"
integrity="sha384-L+Gq2Cso/Y2x8fX4wausgiZT8z0QPZz7OqPuz4YqAycQJyrJT9NRLpjFBD6zlOia"
crossorigin="anonymous"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js"
integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA"
crossorigin="anonymous"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/contrib/auto-render.min.js"
integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl"
crossorigin="anonymous"
onload="renderMathInElement(document.body, {'macros': {'\\test': '\\mathrel{\\char`≠}'}});"
></script>
<style>body { max-width: 800px; margin: 20px auto; }</style>
</head>
<body>
<h1>CKEditor 5 with ckeditor5-math – Development Sample</h1>
<div id="editor">
<h2>Development environment</h2>
<p>
This is a demo of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a> that loads the <code>Math</code> and <code>AutoformatMath</code> plugin.
</p>
<p>
<code>Math</code> inserts mathematical formulas into the editor. You can click the CKEditor 5 Math icon in the toolbar and see the results.
</p>
<h3>The directory structure</h3>
<p>
The code snippet below presents the directory structure.
</p>
<pre><code class="language-plaintext">.
├─ sample
│ ├─ dll.html # The editor initialized using the DLL builds. Check README for details.
│ ├─ index.html # The currently displayed file.
│ └─ ckeditor.js # The editor initialization script.
├─ src
│ ├─ autoformatmath.js # The AutoformatMath plugin.
│ ├─ math.js # The Math plugin.
│ ├─ index.js # The modules exported by the package when using the DLL builds.
│ └─ **/*.js # JavaScript source files.
├─ tests
│ └─ **/*.js # Test files
├─ theme
│ ├─ icons
│ │ ├─ math.svg # The Math icon displayed in the toolbar.
│ └─ mathform.css # Math editor styles.
├─ .editorconfig
├─ ...
└─ README.md</code></pre>
<h3>Reporting issues</h3>
<p>If you found a problem with CKEditor 5 or the package generator, please, report an issue:</p>
<p><a href="https://github.com/isaul32/ckeditor5-math/issues">CKEditor 5 Math</a></p>
</div>
<script src="./ckeditor.dist.js"></script>
</body>
</html>

47
src/autoformatmath.js
View File

@@ -1,12 +1,22 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import { Plugin } from 'ckeditor5/src/core';
import { global, logWarning } from 'ckeditor5/src/utils';
import blockAutoformatEditing from '@ckeditor/ckeditor5-autoformat/src/blockautoformatediting';
import Math from './math';
export default class AutoformatMath extends Plugin {
static get requires() {
return [ Math, Autoformat ];
return [ Math, 'Autoformat' ];
}
/**
* @inheritDoc
*/
init() {
const editor = this.editor;
if ( !editor.plugins.has( 'Math' ) ) {
logWarning( 'autoformat-math-feature-missing', editor );
}
}
afterInit() {
@@ -14,10 +24,22 @@ export default class AutoformatMath extends Plugin {
const command = editor.commands.get( 'math' );
if ( command ) {
const mathBlockCallback = getCallbackFunctionForBlockAutoformat( editor, command );
const callback = () => {
if ( !command.isEnabled ) {
return false;
}
blockAutoformatEditing( editor, this, /^\\\[$/, mathBlockCallback );
blockAutoformatEditing( editor, this, /^\$\$$/, mathBlockCallback );
command.display = true;
// Wait until selection is removed.
global.window.setTimeout(
() => editor.plugins.get( 'MathUI' )._showUI(),
50
);
};
blockAutoformatEditing( editor, this, /^\$\$$/, callback );
blockAutoformatEditing( editor, this, /^\\\[$/, callback );
}
}
@@ -25,14 +47,3 @@ export default class AutoformatMath extends Plugin {
return 'AutoformatMath';
}
}
function getCallbackFunctionForBlockAutoformat( editor, command ) {
return () => {
if ( !command.isEnabled ) {
return false;
}
command.display = true;
editor.plugins.get( 'MathUI' )._showUI();
};
}

12
src/automath.js
View File

@@ -1,10 +1,8 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
import Undo from '@ckeditor/ckeditor5-undo/src/undo';
import LiveRange from '@ckeditor/ckeditor5-engine/src/model/liverange';
import LivePosition from '@ckeditor/ckeditor5-engine/src/model/liveposition';
import global from '@ckeditor/ckeditor5-utils/src/dom/global';
import { Clipboard } from 'ckeditor5/src/clipboard';
import { Plugin } from 'ckeditor5/src/core';
import { LivePosition, LiveRange } from 'ckeditor5/src/engine';
import { Undo } from 'ckeditor5/src/undo';
import { global } from 'ckeditor5/src/utils';
import { extractDelimiters, hasDelimiters, delimitersCounts } from './utils';
export default class AutoMath extends Plugin {

6
src/index.js Normal file
View File

@@ -0,0 +1,6 @@
/**
* @module math
*/
export { default as Math } from './math';
export { default as AutoformatMath } from './autoformatmath';

4
src/math.js
View File

@@ -1,5 +1,5 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import Widget from '@ckeditor/ckeditor5-widget/src/widget';
import { Plugin } from 'ckeditor5/src/core';
import { Widget } from 'ckeditor5/src/widget';
import MathUI from './mathui';
import MathEditing from './mathediting';

3
src/mathcommand.js
View File

@@ -1,5 +1,4 @@
import Command from '@ckeditor/ckeditor5-core/src/command';
import { Command } from 'ckeditor5/src/core';
import { getSelectedMathModelWidget } from './utils';
export default class MathCommand extends Command {

7
src/mathediting.js
View File

@@ -1,9 +1,6 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import { toWidget, viewToModelPositionOutsideModelElement } from '@ckeditor/ckeditor5-widget/src/utils';
import Widget from '@ckeditor/ckeditor5-widget/src/widget';
import MathCommand from './mathcommand';
import { Plugin } from 'ckeditor5/src/core';
import { toWidget, Widget, viewToModelPositionOutsideModelElement } from 'ckeditor5/src/widget';
import { renderEquation, extractDelimiters } from './utils';
export default class MathEditing extends Plugin {

21
src/mathui.js
View File

@@ -1,18 +1,11 @@
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
import uid from '@ckeditor/ckeditor5-utils/src/uid';
import global from '@ckeditor/ckeditor5-utils/src/dom/global';
import { getBalloonPositionData } from './utils';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import MainFormView from './ui/mainformview';
// Need math commands from there
import MathEditing from './mathediting';
import MainFormView from './ui/mainformview';
import mathIcon from '../theme/icons/math.svg';
import { Plugin } from 'ckeditor5/src/core';
import { ClickObserver } from 'ckeditor5/src/engine';
import { ButtonView, ContextualBalloon, clickOutsideHandler } from 'ckeditor5/src/ui';
import { global, uid } from 'ckeditor5/src/utils';
import { getBalloonPositionData } from './utils';
const mathKeystroke = 'Ctrl+M';
@@ -124,7 +117,7 @@ export default class MathUI extends Plugin {
} );
if ( this._balloon.visibleView === this.formView ) {
this.formView.mathInputView.select();
this.formView.mathInputView.fieldView.element.select();
}
// Show preview element

46
src/ui/mainformview.js
View File

@@ -1,27 +1,15 @@
import View from '@ckeditor/ckeditor5-ui/src/view';
import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview';
import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview';
import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
import { icons } from 'ckeditor5/src/core';
import {
ButtonView, createLabeledInputText, FocusCycler, LabelView, LabeledFieldView,
submitHandler, SwitchButtonView, View, ViewCollection
} from 'ckeditor5/src/ui';
import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
import { extractDelimiters, hasDelimiters } from '../utils';
import MathView from './mathview';
import '../../theme/mathform.css';
const { check: checkIcon, cancel: cancelIcon } = icons;
export default class MainFormView extends View {
constructor( locale, engine, lazyLoad, previewEnabled, previewUid, previewClassName, popupClassName, katexRenderOptions ) {
super( locale );
@@ -127,11 +115,11 @@ export default class MainFormView extends View {
}
get equation() {
return this.mathInputView.inputView.element.value;
return this.mathInputView.fieldView.element.value;
}
set equation( equation ) {
this.mathInputView.inputView.element.value = equation;
this.mathInputView.fieldView.element.value = equation;
if ( this.previewEnabled ) {
this.mathView.value = equation;
}
@@ -157,13 +145,13 @@ export default class MainFormView extends View {
const t = this.locale.t;
// Create equation input
const mathInput = new LabeledInputView( this.locale, InputTextView );
const inputView = mathInput.inputView;
const mathInput = new LabeledFieldView( this.locale, createLabeledInputText );
const fieldView = mathInput.fieldView;
mathInput.infoText = t( 'Insert equation in TeX format.' );
const onInput = () => {
if ( inputView.element != null ) {
let equationInput = inputView.element.value.trim();
if ( fieldView.element != null ) {
let equationInput = fieldView.element.value.trim();
// If input has delimiters
if ( hasDelimiters( equationInput ) ) {
@@ -171,7 +159,7 @@ export default class MainFormView extends View {
const params = extractDelimiters( equationInput );
// Remove delimiters from input field
inputView.element.value = params.equation;
fieldView.element.value = params.equation;
equationInput = params.equation;
@@ -187,8 +175,8 @@ export default class MainFormView extends View {
}
};
inputView.on( 'render', onInput );
inputView.on( 'input', onInput );
fieldView.on( 'render', onInput );
fieldView.on( 'input', onInput );
return mathInput;
}

3
src/ui/mathview.js
View File

@@ -1,5 +1,4 @@
import View from '@ckeditor/ckeditor5-ui/src/view';
import { View } from 'ckeditor5/src/ui';
import { renderEquation } from '../utils';
export default class MathView extends View {

4
src/utils.js
View File

@@ -1,5 +1,5 @@
import global from '@ckeditor/ckeditor5-utils/src/dom/global';
import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
import { BalloonPanelView } from 'ckeditor5/src/ui';
import { global } from 'ckeditor5/src/utils';
export function getSelectedMathModelWidget( selection ) {
const selectedElement = selection.getSelectedElement();

4
tests/automath.js
View File

@@ -1,6 +1,6 @@
import Mathematics from '../src/math';
import AutoMath from '../src/automath';
import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Undo from '@ckeditor/ckeditor5-undo/src/undo';
@@ -15,7 +15,7 @@ describe( 'AutoMath - integration', () => {
editorElement = global.document.createElement( 'div' );
global.document.body.appendChild( editorElement );
return ClassicTestEditor
return ClassicEditor
.create( editorElement, {
plugins: [ Mathematics, AutoMath, Typing, Paragraph ],
math: {

13
tests/index.js Normal file
View File

@@ -0,0 +1,13 @@
import { Math as MathDll, AutoformatMath as AutoformatMathDll } from '../src';
import Math from '../src/math';
import AutoformatMath from '../src/autoformatmath';
describe( 'CKEditor5 Math DLL', () => {
it( 'exports Math', () => {
expect( MathDll ).to.equal( Math );
} );
it( 'exports AutoformatMath', () => {
expect( AutoformatMathDll ).to.equal( AutoformatMath );
} );
} );

4
tests/math.js
View File

@@ -1,4 +1,4 @@
import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Mathematics from '../src/math';
import MathEditing from '../src/mathediting';
import MathUI from '../src/mathui';
@@ -13,7 +13,7 @@ describe( 'Math', () => {
editorElement = global.document.createElement( 'div' );
global.document.body.appendChild( editorElement );
return ClassicTestEditor
return ClassicEditor
.create( editorElement, {
plugins: [ Mathematics ]
} )

41
tests/mathui.js
View File

@@ -1,7 +1,6 @@
/* globals document, Event */
import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
import { setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
@@ -17,13 +16,11 @@ import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobs
describe( 'MathUI', () => {
let editorElement, editor, mathUIFeature, mathButton, balloon, formView;
testUtils.createSinonSandbox();
beforeEach( () => {
editorElement = document.createElement( 'div' );
document.body.appendChild( editorElement );
return ClassicTestEditor
return ClassicEditor
.create( editorElement, {
plugins: [ MathUI, Paragraph ],
math: {
@@ -44,8 +41,8 @@ describe( 'MathUI', () => {
formView = mathUIFeature.formView;
// There is no point to execute BalloonPanelView attachTo and pin methods so lets override it.
testUtils.sinon.stub( balloon.view, 'attachTo' ).returns( {} );
testUtils.sinon.stub( balloon.view, 'pin' ).returns( {} );
sinon.stub( balloon.view, 'attachTo' ).returns( {} );
sinon.stub( balloon.view, 'pin' ).returns( {} );
formView.render();
} );
@@ -90,7 +87,7 @@ describe( 'MathUI', () => {
} );
it( 'should call #_showUI upon #execute', () => {
const spy = testUtils.sinon.stub( mathUIFeature, '_showUI' ).returns( {} );
const spy = sinon.stub( mathUIFeature, '_showUI' ).returns( {} );
mathButton.fire( 'execute' );
sinon.assert.calledOnce( spy );
@@ -102,7 +99,7 @@ describe( 'MathUI', () => {
let balloonAddSpy;
beforeEach( () => {
balloonAddSpy = testUtils.sinon.spy( balloon, 'add' );
balloonAddSpy = sinon.spy( balloon, 'add' );
editor.editing.view.document.isFocused = true;
} );
@@ -187,7 +184,7 @@ describe( 'MathUI', () => {
} );
it( 'should focus the `editable` by default', () => {
const spy = testUtils.sinon.spy( editor.editing.view, 'focus' );
const spy = sinon.spy( editor.editing.view, 'focus' );
mathUIFeature._hideUI();
@@ -196,8 +193,8 @@ describe( 'MathUI', () => {
} );
it( 'should focus the `editable` before before removing elements from the balloon', () => {
const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
const removeSpy = testUtils.sinon.spy( balloon, 'remove' );
const focusSpy = sinon.spy( editor.editing.view, 'focus' );
const removeSpy = sinon.spy( balloon, 'remove' );
mathUIFeature._hideUI();
@@ -225,7 +222,7 @@ describe( 'MathUI', () => {
describe( 'keyboard support', () => {
it( 'should show the UI on Ctrl+M keystroke', () => {
const spy = testUtils.sinon.stub( mathUIFeature, '_showUI' ).returns( {} );
const spy = sinon.stub( mathUIFeature, '_showUI' ).returns( {} );
const command = editor.commands.get( 'math' );
command.isEnabled = false;
@@ -307,7 +304,7 @@ describe( 'MathUI', () => {
} );
it( 'should hide the UI after Esc key press (from editor) and not focus the editable', () => {
const spy = testUtils.sinon.spy( mathUIFeature, '_hideUI' );
const spy = sinon.spy( mathUIFeature, '_hideUI' );
const keyEvtData = {
keyCode: keyCodes.esc,
preventDefault: sinon.spy(),
@@ -322,7 +319,7 @@ describe( 'MathUI', () => {
} );
it( 'should not hide the UI after Esc key press (from editor) when UI is open but is not visible', () => {
const spy = testUtils.sinon.spy( mathUIFeature, '_hideUI' );
const spy = sinon.spy( mathUIFeature, '_hideUI' );
const keyEvtData = {
keyCode: keyCodes.esc,
preventDefault: () => {},
@@ -347,7 +344,7 @@ describe( 'MathUI', () => {
describe( 'mouse support', () => {
it( 'should hide the UI and not focus editable upon clicking outside the UI', () => {
const spy = testUtils.sinon.spy( mathUIFeature, '_hideUI' );
const spy = sinon.spy( mathUIFeature, '_hideUI' );
mathUIFeature._showUI();
document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
@@ -356,7 +353,7 @@ describe( 'MathUI', () => {
} );
it( 'should not hide the UI upon clicking inside the the UI', () => {
const spy = testUtils.sinon.spy( mathUIFeature, '_hideUI' );
const spy = sinon.spy( mathUIFeature, '_hideUI' );
mathUIFeature._showUI();
balloon.view.element.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
@@ -391,12 +388,12 @@ describe( 'MathUI', () => {
} );
it( 'should execute math command on mainFormView#submit event', () => {
const executeSpy = testUtils.sinon.spy( editor, 'execute' );
const executeSpy = sinon.spy( editor, 'execute' );
formView.mathInputView.value = 'x^2';
expect( formView.mathInputView.inputView.element.value ).to.equal( 'x^2' );
expect( formView.mathInputView.fieldView.element.value ).to.equal( 'x^2' );
formView.mathInputView.inputView.element.value = 'x^2';
formView.mathInputView.fieldView.element.value = 'x^2';
formView.fire( 'submit' );
expect( executeSpy.calledOnce ).to.be.true;
@@ -427,8 +424,8 @@ describe( 'MathUI', () => {
it( 'should blur math input element before hiding the view', () => {
mathUIFeature._showUI();
const focusSpy = testUtils.sinon.spy( formView.saveButtonView, 'focus' );
const removeSpy = testUtils.sinon.spy( balloon, 'remove' );
const focusSpy = sinon.spy( formView.saveButtonView, 'focus' );
const removeSpy = sinon.spy( balloon, 'remove' );
formView.fire( 'cancel' );

3
theme/mathform.css
View File

@@ -3,6 +3,7 @@
align-items: flex-start;
flex-direction: row;
flex-wrap: nowrap;
padding: var(--ck-spacing-standard);
@media screen and (max-width: 600px) {
flex-wrap: wrap;
@@ -10,7 +11,7 @@
& .ck-math-view {
flex-basis: 100%;
& .ck-labeled-input {
& .ck-labeled-view {
flex-basis: 100%;
}

68
webpack.config.js
View File

@@ -1,68 +0,0 @@
const path = require("path");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
// https://webpack.js.org/configuration/entry-context/
entry: "./demo/app.js",
// https://webpack.js.org/configuration/output/
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
devServer: {
disableHostCheck: true,
headers: {
"Access-Control-Allow-Origin": "*",
},
historyApiFallback: true,
hot: true,
inline: true,
index: "./demo/index.html",
},
plugins: [
new MiniCssExtractPlugin(),
new HtmlWebpackPlugin({
template: "./demo/index.html",
}),
],
module: {
rules: [
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: ["raw-loader"],
},
{
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve(
"@ckeditor/ckeditor5-theme-lark"
),
},
minify: true,
}),
},
},
],
},
],
},
// Useful for debugging.
devtool: "source-map",
// By default webpack logs warnings if the bundle is bigger than 200kb.
performance: { hints: false },
};

3891
yarn.lock
View File

File diff suppressed because it is too large Load Diff