mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-27 10:02:59 +08:00
chore(ckeditor5-math): clean up
This commit is contained in:
Elian Doran
parent
9de3f0f4ba
commit
ee6e111a85
@ -1,20 +0,0 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = tab
|
||||
tab_width = 4
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.{js,jsx,ts}]
|
||||
quote_type = single
|
||||
|
||||
[*.{yml,yaml}]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
|
||||
[package.json]
|
||||
indent_style = space
|
||||
tab_width = 4
|
||||
@ -1,60 +0,0 @@
|
||||
module.exports = {
|
||||
extends: [
|
||||
"ckeditor5",
|
||||
"plugin:@typescript-eslint/strict",
|
||||
"plugin:@typescript-eslint/stylistic-type-checked",
|
||||
],
|
||||
root: true,
|
||||
plugins: ["@typescript-eslint"],
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
project: true,
|
||||
__tsconfigRootDir: __dirname,
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
},
|
||||
globals: {
|
||||
MathJax: true,
|
||||
katex: true,
|
||||
console: true,
|
||||
},
|
||||
ignorePatterns: [
|
||||
// Ignore the entire `build/` (the DLL build).
|
||||
"build/**",
|
||||
// Ignore compiled JavaScript files, as they are generated automatically.
|
||||
'src/**/*.js',
|
||||
// Also, do not check typing declarations, too.
|
||||
'src/**/*.d.ts'
|
||||
],
|
||||
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",
|
||||
|
||||
"no-void": ["error", { allowAsStatement: true }],
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: [ 'tests/**/*.[jt]s', 'sample/**/*.[jt]s' ],
|
||||
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",
|
||||
},
|
||||
},
|
||||
{
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
files: [".eslintrc.{js,cjs}"],
|
||||
parserOptions: {
|
||||
sourceType: "script",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
18
_regroup/ckeditor5-math/.gitattributes
vendored
18
_regroup/ckeditor5-math/.gitattributes
vendored
@ -1,18 +0,0 @@
|
||||
* 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
|
||||
@ -1,26 +0,0 @@
|
||||
name: Release
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*'
|
||||
jobs:
|
||||
publish-package:
|
||||
name: Publish package
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- name: Set up Node
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 22
|
||||
registry-url: 'https://registry.npmjs.org'
|
||||
always-auth: true
|
||||
- run: |
|
||||
corepack enable &&
|
||||
corepack install
|
||||
- name: Install dependencies
|
||||
run: yarn install --frozen-lockfile
|
||||
- name: Publish package
|
||||
run: yarn publish --access public
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
|
||||
10
_regroup/ckeditor5-math/.gitignore
vendored
10
_regroup/ckeditor5-math/.gitignore
vendored
@ -1,10 +0,0 @@
|
||||
node_modules/
|
||||
build/
|
||||
tmp/
|
||||
sample/ckeditor.dist.js
|
||||
package-lock.json
|
||||
yarn-error.log
|
||||
|
||||
# Ignore compiled TypeScript files.
|
||||
src/**/*.js
|
||||
src/**/*.d.ts
|
||||
@ -1 +0,0 @@
|
||||
18.12.1
|
||||
@ -1 +0,0 @@
|
||||
src/
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"embeddedLanguageFormatting": "off",
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.json",
|
||||
"options": {
|
||||
"tabWidth": 2
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
{
|
||||
"extends": "stylelint-config-ckeditor5"
|
||||
}
|
||||
@ -1,288 +0,0 @@
|
||||
# CKEditor 5 mathematical feature · [](https://github.com/isaul32/ckeditor5-math/blob/master/LICENSE) [](https://www.npmjs.com/package/@isaul32/ckeditor5-math)
|
||||
|
||||
ckeditor5-math is a TeX-based mathematical plugin for CKEditor 5. You can use it to insert, edit, and view mathematical equations and formulas. This plugin supports [MathJax], [KaTeX] and custom typesetting engines.
|
||||
|
||||
[mathjax]: https://www.mathjax.org/
|
||||
[katex]: https://katex.org/
|
||||
|
||||
## Table of contents
|
||||
|
||||
- [Features](#features)
|
||||
- [Demos](#demos)
|
||||
- [Screenshots](#screenshots)
|
||||
- [Requirements](#requirements)
|
||||
- [Examples](#examples)
|
||||
- [Installation](#installation)
|
||||
- [Styles for Lark theme](#styles-for-lark-theme)
|
||||
- [Configuration & Usage](#configuration--usage)
|
||||
- [Plugin options](#plugin-options)
|
||||
- [Available typesetting engines](#available-typesetting-engines)
|
||||
- [Supported input and output formats](#supported-input-and-output-formats)
|
||||
- [Paste support](#paste-support)
|
||||
- [From plain text](#from-plain-text)
|
||||
- [Autoformat support](#autoformat-support)
|
||||
- [Preview workaround](#preview-workaround)
|
||||
|
||||
## Features
|
||||
|
||||
- Written in TypeScript (as of v41.2.1)
|
||||
- DLL build support (as of v36.0.3)
|
||||
- TeX syntax
|
||||
- Inline and display equations
|
||||
- Preview view
|
||||
- Multiple typesetting engines
|
||||
- Have multiple input and output format
|
||||
- Paste support
|
||||
- from plain text
|
||||
- Autoformat support
|
||||
|
||||
# Demos
|
||||
|
||||
- [Classic editor with MathJax](https://jsfiddle.net/isaul32/qktj9h7x/)
|
||||
- [Classic editor with KaTex](https://jsfiddle.net/isaul32/3wjrkLdv/)
|
||||
- [Balloon block editor with KaTex](https://jsfiddle.net/isaul32/q01mu8kp/)
|
||||
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Requirements
|
||||
|
||||
- Use same major version as your CKEditor 5 build
|
||||
|
||||
If you get duplicated modules error, you have mismatching versions.
|
||||
|
||||
## Examples
|
||||
|
||||
[Link to examples repository](https://github.com/isaul32/ckeditor5-math-examples)
|
||||
|
||||
## Installation
|
||||
|
||||
Use official classic or inline build as a base:
|
||||
|
||||
- [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
|
||||
|
||||
`npm install @isaul32/ckeditor5-math --save-dev`
|
||||
|
||||
`yarn add @isaul32/ckeditor5-math --dev`
|
||||
|
||||
Add import into ckeditor.js file
|
||||
|
||||
```js
|
||||
import Math from '@isaul32/ckeditor5-math/src/math';
|
||||
import AutoformatMath from '@isaul32/ckeditor5-math/src/autoformatmath';
|
||||
```
|
||||
|
||||
Add it to built-in plugins
|
||||
|
||||
```js
|
||||
InlineEditor.builtinPlugins = [
|
||||
// ...
|
||||
Math,
|
||||
AutoformatMath
|
||||
];
|
||||
```
|
||||
|
||||
**Add math button to toolbar**
|
||||
|
||||
```js
|
||||
InlineEditor.defaultConfig = {
|
||||
toolbar: {
|
||||
items: [
|
||||
// ...
|
||||
'math'
|
||||
]
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Styles for Lark theme
|
||||
|
||||
**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
|
||||
|
||||
```js
|
||||
InlineEditor.defaultConfig = {
|
||||
// ...
|
||||
math: {
|
||||
engine: 'mathjax', // or katex or function. E.g. (equation, element, display) => { ... }
|
||||
lazyLoad: undefined, // async () => { ... }, called once before rendering first equation if engine doesn't exist. After resolving promise, plugin renders equations.
|
||||
outputType: 'script', // or span
|
||||
className: 'math-tex', // class name to use with span output type, change e.g. MathJax processClass (v2) / processHtmlClass (v3) is set
|
||||
forceOutputType: false, // forces output to use outputType
|
||||
enablePreview: true, // Enable preview view
|
||||
previewClassName: [], // Class names to add to previews
|
||||
popupClassName: [], // Class names to add to math popup balloon
|
||||
katexRenderOptions: {} // KaTeX only options for katex.render(ToString)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Available typesetting engines
|
||||
|
||||
**MathJax**
|
||||
|
||||
- Tested with **latest 2.7**
|
||||
- Has experimental (**CHTML**, **SVG**) support for **3.0.0** or newer version
|
||||
|
||||
[<img src="https://www.mathjax.org/badge/badge-square.svg" width="130" alt="KaTeX">](https://www.mathjax.org/)
|
||||
|
||||
**KaTeX**
|
||||
|
||||
- Tested with version **0.12.0**
|
||||
|
||||
[<img src="https://katex.org/img/katex-logo-black.svg" width="130" alt="KaTeX">](https://katex.org/)
|
||||
|
||||
- `katexRenderOptions` - pass [options](https://katex.org/docs/options.html).
|
||||
|
||||
```js
|
||||
InlineEditor.defaultConfig = {
|
||||
// ...
|
||||
math: {
|
||||
engine: 'katex'
|
||||
katexRenderOptions: {
|
||||
macros: {
|
||||
"\\neq": "\\mathrel{\\char`≠}",
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Custom typesetting**
|
||||
|
||||
Custom typesetting is possible to implement with engine config. For example, custom typesetting feature can be used when use back end rendering.
|
||||
|
||||
```js
|
||||
InlineEditor.defaultConfig = {
|
||||
// ...
|
||||
math: {
|
||||
engine: ( equation, element, display, preview ) => {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- **equation** is equation in TeX format without delimiters.
|
||||
- **element** is DOM element reserved for rendering.
|
||||
- **display** is boolean. Typesetting should be inline when false.
|
||||
- **preview** is boolean. Rendering in preview when true.
|
||||
|
||||
### Supported input and output formats
|
||||
|
||||
Supported input and output formats are:
|
||||
|
||||
```html
|
||||
<!-- MathJax style http://docs.mathjax.org/en/v2.7-latest/advanced/model.html#how-mathematics-is-stored-in-the-page -->
|
||||
<script type="math/tex">\sqrt{\frac{a}{b}}</script>
|
||||
<script type="math/tex; mode=display">\sqrt{\frac{a}{b}}</script>
|
||||
|
||||
<!-- CKEditor 4 style https://ckeditor.com/docs/ckeditor4/latest/features/mathjax.html -->
|
||||
<span class="math-tex">\( \sqrt{\frac{a}{b}} \)</span>
|
||||
<span class="math-tex">\[ \sqrt{\frac{a}{b}} \]</span>
|
||||
```
|
||||
|
||||
### Paste support
|
||||
|
||||
#### From plain text
|
||||
|
||||
Paste TeX equations with **delimiters**. For example:
|
||||
|
||||
```latex
|
||||
\[ x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```latex
|
||||
\( x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \)
|
||||
```
|
||||
|
||||
### Autoformat support
|
||||
|
||||
#### Inline mode
|
||||
|
||||
Ctrl+M can be used to add easily math formulas in inline mode.
|
||||
|
||||
#### Display mode
|
||||
|
||||
Autoformat for math can be used to add formula in display mode on a new line by adding `\[` or `$$`. This feature requires additional autoformat plugin to be added.
|
||||
|
||||
Add following lines into your build
|
||||
|
||||
```js
|
||||
// ...
|
||||
import AutoformatMath from '@isaul32/ckeditor5-math/src/autoformatmath';
|
||||
|
||||
InlineEditor.builtinPlugins = [
|
||||
// ...
|
||||
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.
|
||||
|
||||
My solution for this is use rendering element outside of CKEditor DOM and place it to right place by using absolute position. Alternative solution could be using iframe, but then typesetting engine's scripts and styles have to copy to child document.
|
||||
|
||||
## Development
|
||||
|
||||
Contributions, improvements and bug fixes are welcome. To aid in this, try out
|
||||
our developer environment w/ live reload support and [CKEditor 5 inspector].
|
||||
|
||||
|
||||
|
||||
To enter a development loop with hot reload support:
|
||||
|
||||
- `git clone https://github.com/isaul32/ckeditor5-math.git`
|
||||
- `cd ckeditor5-math`
|
||||
- `yarn`
|
||||
- `yarn start`
|
||||
- http://localhost:8080
|
||||
|
||||
[ckeditor 5 inspector]: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/development-tools.html#ckeditor-5-inspector
|
||||
@ -1,23 +0,0 @@
|
||||
{
|
||||
"plugins": [
|
||||
{
|
||||
"name": "Math",
|
||||
"className": "Math",
|
||||
"description": "Adds mathematical formulas 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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,92 +0,0 @@
|
||||
{
|
||||
"name": "@triliumnext/ckeditor5-math",
|
||||
"version": "43.2.0-hotfix1",
|
||||
"description": "Math feature for CKEditor 5.",
|
||||
"keywords": [
|
||||
"ckeditor",
|
||||
"ckeditor5",
|
||||
"ckeditor 5",
|
||||
"ckeditor5-feature",
|
||||
"ckeditor5-plugin",
|
||||
"ckeditor5-math",
|
||||
"katex"
|
||||
],
|
||||
"main": "src/index.js",
|
||||
"dependencies": {
|
||||
"@ckeditor/ckeditor5-core": "43.2.0",
|
||||
"@ckeditor/ckeditor5-enter": "43.2.0",
|
||||
"@ckeditor/ckeditor5-typing": "43.2.0",
|
||||
"@ckeditor/ckeditor5-ui": "43.2.0",
|
||||
"@ckeditor/ckeditor5-utils": "43.2.0",
|
||||
"ckeditor5": "43.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ckeditor/ckeditor5-basic-styles": "43.2.0",
|
||||
"@ckeditor/ckeditor5-dev-utils": "^43.0.0",
|
||||
"@ckeditor/ckeditor5-editor-classic": "43.2.0",
|
||||
"@ckeditor/ckeditor5-engine": "43.2.0",
|
||||
"@ckeditor/ckeditor5-heading": "43.2.0",
|
||||
"@ckeditor/ckeditor5-image": "43.2.0",
|
||||
"@ckeditor/ckeditor5-list": "43.2.0",
|
||||
"@ckeditor/ckeditor5-paragraph": "43.2.0",
|
||||
"@ckeditor/ckeditor5-table": "43.2.0",
|
||||
"@ckeditor/ckeditor5-theme-lark": "43.2.0",
|
||||
"typescript": "5.0.4",
|
||||
"webpack": "^5.94.0",
|
||||
"webpack-cli": "^5.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0",
|
||||
"npm": ">=5.7.1"
|
||||
},
|
||||
"author": "Sauli Anto",
|
||||
"license": "ISC",
|
||||
"bugs": "https://github.com/TriliumNext/ckeditor5-math/issues",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/TriliumNext/ckeditor5-math.git"
|
||||
},
|
||||
"files": [
|
||||
"lang",
|
||||
"src/**/*.js",
|
||||
"src/**/*.d.ts",
|
||||
"build",
|
||||
"theme",
|
||||
"ckeditor5-metadata.json",
|
||||
"CHANGELOG.md"
|
||||
],
|
||||
"scripts": {
|
||||
"ts:build": "tsc -p ./tsconfig.release.json",
|
||||
"ts:clear": "npx rimraf \"src/**/*.@(js|d.ts)\"",
|
||||
"dll:build": "ckeditor5-package-tools dll:build",
|
||||
"dll:serve": "http-server ./ -o sample/dll.html",
|
||||
"lint": "eslint --quiet --ext .ts src/",
|
||||
"lint:fix": "eslint --quiet --fix --ext .ts src/",
|
||||
"stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css'",
|
||||
"test": "ckeditor5-package-tools test",
|
||||
"prepare": "yarn run dll:build",
|
||||
"prepublishOnly": "yarn run ts:build && ckeditor5-package-tools export-package-as-javascript",
|
||||
"postpublish": "yarn run ts:clear && ckeditor5-package-tools export-package-as-typescript",
|
||||
"start": "ckeditor5-package-tools start"
|
||||
},
|
||||
"lint-staged": {
|
||||
"**/*.ts": [
|
||||
"eslint --quiet"
|
||||
],
|
||||
"**/*.css": [
|
||||
"stylelint --quiet --allow-empty-input"
|
||||
]
|
||||
},
|
||||
"eslintIgnore": [
|
||||
"node_modules/**",
|
||||
"packages/*/node_modules/**",
|
||||
"packages/*/build/**",
|
||||
"packages/*/src/lib/**"
|
||||
],
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@1.22.22"
|
||||
}
|
||||
113
_regroup/ckeditor5-math/sample/ckeditor.js
vendored
113
_regroup/ckeditor5-math/sample/ckeditor.js
vendored
@ -1,113 +0,0 @@
|
||||
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 );
|
||||
} );
|
||||
@ -1,154 +0,0 @@
|
||||
<!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
|
||||
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js"
|
||||
integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
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>
|
||||
@ -1,90 +0,0 @@
|
||||
<!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
|
||||
src="https://cdn.jsdelivr.net/npm/katex@0.13.5/dist/katex.min.js"
|
||||
integrity="sha384-z64WtjpyrKFsxox9eI4SI8eM9toXdoYeWb5Qh+8PO+eG54Bv9BZqf9xNhlcLf/sA"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@ -1,25 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": [
|
||||
"DOM"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitOverride": true,
|
||||
"strict": true,
|
||||
"module": "es6",
|
||||
"target": "es2020",
|
||||
"sourceMap": true,
|
||||
"allowJs": true,
|
||||
"moduleResolution": "node",
|
||||
"typeRoots": [
|
||||
"typings",
|
||||
"node_modules/@types"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"./sample",
|
||||
"./src",
|
||||
"./tests",
|
||||
"./typings"
|
||||
]
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"sourceMap": false,
|
||||
"declaration": true
|
||||
},
|
||||
"exclude": [
|
||||
"./tests/",
|
||||
"./sample/"
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,6 +0,0 @@
|
||||
Software License Agreement
|
||||
==========================
|
||||
|
||||
Copyright (c) 2025. All rights reserved.
|
||||
|
||||
Licensed under the terms of [MIT license](https://opensource.org/licenses/MIT).
|
||||
@ -1,21 +1,25 @@
|
||||
@triliumnext/ckeditor5-math
|
||||
===========================
|
||||
# CKEditor 5 mathematical feature · [](https://github.com/isaul32/ckeditor5-math/blob/master/LICENSE) [](https://www.npmjs.com/package/@isaul32/ckeditor5-math)
|
||||
|
||||
This package was created by the [ckeditor5-package-generator](https://www.npmjs.com/package/ckeditor5-package-generator) package.
|
||||
ckeditor5-math is a TeX-based mathematical plugin for CKEditor 5. You can use it to insert, edit, and view mathematical equations and formulas. This plugin supports [MathJax], [KaTeX] and custom typesetting engines.
|
||||
|
||||
[mathjax]: https://www.mathjax.org/
|
||||
[katex]: https://katex.org/
|
||||
|
||||
## Table of contents
|
||||
|
||||
* [Developing the package](#developing-the-package)
|
||||
* [Available scripts](#available-scripts)
|
||||
* [`start`](#start)
|
||||
* [`test`](#test)
|
||||
* [`lint`](#lint)
|
||||
* [`stylelint`](#stylelint)
|
||||
* [`build:dist`](#builddist)
|
||||
* [`translations:synchronize`](#translationssynchronize)
|
||||
* [`translations:validate`](#translationsvalidate)
|
||||
* [`ts:build` and `ts:clear`](#tsbuild-and-tsclear)
|
||||
* [License](#license)
|
||||
- [CKEditor 5 mathematical feature · ](#ckeditor-5-mathematical-feature---)
|
||||
- [Table of contents](#table-of-contents)
|
||||
- [Developing the package](#developing-the-package)
|
||||
- [Available scripts](#available-scripts)
|
||||
- [`start`](#start)
|
||||
- [`test`](#test)
|
||||
- [`lint`](#lint)
|
||||
- [`stylelint`](#stylelint)
|
||||
- [`build:dist`](#builddist)
|
||||
- [`translations:synchronize`](#translationssynchronize)
|
||||
- [`translations:validate`](#translationsvalidate)
|
||||
- [`ts:build` and `ts:clear`](#tsbuild-and-tsclear)
|
||||
- [License](#license)
|
||||
|
||||
## Developing the package
|
||||
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
{
|
||||
"name": "@triliumnext/ckeditor5-math",
|
||||
"version": "0.0.1",
|
||||
"description": "A plugin for CKEditor 5.",
|
||||
"version": "43.2.0",
|
||||
"description": "Math feature for CKEditor 5.",
|
||||
"keywords": [
|
||||
"ckeditor",
|
||||
"ckeditor5",
|
||||
"ckeditor 5",
|
||||
"ckeditor5-feature",
|
||||
"ckeditor5-plugin",
|
||||
"ckeditor5-package-generator"
|
||||
"ckeditor5-math",
|
||||
"katex"
|
||||
],
|
||||
"type": "module",
|
||||
"main": "dist/index.ts",
|
||||
@ -23,7 +24,8 @@
|
||||
"./browser/*": null,
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Sauli Anto",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=18.0.0",
|
||||
"npm": ">=5.7.1"
|
||||
|
||||
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
Loading…
x
Reference in New Issue
Block a user