Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#46 Convert to DLL compatible plugin #83

Merged
merged 3 commits into from
Mar 14, 2023
Merged

#46 Convert to DLL compatible plugin #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b2ed752
Convert to DLL compatible plugin (#46)
DanielKulbe Feb 6, 2023
11314b2
Add examples to index.html
DanielKulbe Feb 21, 2023
da9ca15
Fix math not rendered at editor startup
DanielKulbe Feb 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .editorconfig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 0 additions & 2 deletions .eslintignore
View file
Open in desktop

This file was deleted.

27 changes: 26 additions & 1 deletion .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
}
]
};
19 changes: 18 additions & 1 deletion .gitattributes
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,18 @@
* text=auto
* 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 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
node_modules/
build/
tmp/
sample/ckeditor.dist.js
package-lock.json
yarn-error.log
public
48 changes: 42 additions & 6 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -72,15 +72,17 @@ 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

```js
InlineEditor.builtinPlugins = [
// ...
Mathematics
Math,
AutoformatMath
];
```

Expand All @@ -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
Expand Down Expand Up @@ -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.
Expand Down
23 changes: 23 additions & 0 deletions ckeditor5-metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 changes: 0 additions & 29 deletions demo/app.js
View file
Open in desktop

This file was deleted.

61 changes: 0 additions & 61 deletions demo/index.html
View file
Open in desktop

This file was deleted.

72 changes: 37 additions & 35 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "ckeditor5-math",
"name": "@isaul32/ckeditor5-math",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@DanielKulbe I did find a minor issue here.

The npm package is ckeditor5-math

When corrected, it raises:

$ yarn run dll:build
yarn run v1.22.19
$ ckeditor5-package-tools dll:build
ckeditor5-math/node_modules/@ckeditor/ckeditor5-package-tools/lib/utils/get-webpack-config-dll.js:23
        const dllName = packageJson.name.split( '/' )[ 1 ].replace( /^ckeditor5-/, '' );

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I filed an issue at ckeditor/ckeditor5-package-generator#139

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

100% an oversight by me 😆 Who would have thought an ordinary NPM package name would raise an error

"version": "36.0.2",
"description": "Math feature for CKEditor 5.",
"keywords": [
Expand All @@ -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",
Expand All @@ -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": [
Expand Down
Loading