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

Upgrade ck-editor #3492

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Upgrade ck-editor #3492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1667c10
feat: add documentation to projects
olloz26 Oct 30, 2024
8da0b9c
revert markdown renderer change and ckeditor upgrade + minor changes …
ciyer Jan 10, 2025
a074ae9
review fixes
ciyer Jan 17, 2025
b682eed
feat: upgrade ck-editor
olloz26 Oct 30, 2024
6becc6a
fix compiler complaints
ciyer Jan 17, 2025
ce672bc
fix tests
ciyer Jan 20, 2025
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
4 changes: 4 additions & 0 deletions client/.eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@
"apiversion",
"ascii",
"asciimath",
"autoformat",
"autosave",
"autosaved",
"autosaves",
Expand All @@ -106,6 +107,7 @@
"bool",
"booleans",
"borderless",
"bulleted",
"calc",
"cancellable",
"cancelled",
Expand Down Expand Up @@ -257,13 +259,15 @@
"stdout",
"stockimages",
"storages",
"strikethrough",
"swiper",
"tada",
"telepresence",
"textarea",
"thead",
"toastify",
"toggler",
"tokenizer",
"tolerations",
"toml",
"tooltip",
Expand Down
3 changes: 3 additions & 0 deletions client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root" class="d-flex flex-column min-vh-100"></div>
<script>
const global = { document: document, window: window };
</script>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
1,091 changes: 1,062 additions & 29 deletions client/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,20 @@
},
"type": "module",
"dependencies": {
"@ckeditor/ckeditor5-react": "^5.1.0",
"ckeditor5": "43.1.1",
"@ckeditor/ckeditor5-build-classic": "43.1.1",
"@ckeditor/ckeditor5-list": "43.1.1",
"@ckeditor/ckeditor5-react": "^9.3.0",
"@ckeditor/ckeditor5-word-count": "43.1.1",
"@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.2.0",
"@isaul32/ckeditor5-math": "43.1.1",
"@popperjs/core": "^2.11.8",
"@reduxjs/toolkit": "^1.9.7",
"@renku/ckeditor5-build-renku": "0.0.6",
"@sentry/react": "^7.119.1",
"ajv": "^6.12.6",
"bootstrap": "^5.3.3",
Expand Down
275 changes: 258 additions & 17 deletions client/src/components/form-field/CkEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,279 @@
// Until we upgrade to CKEditor 5 v6.0.0, it is necessary to
// wrap the CKEditor component in a JS (not TS) component

import { ClassicEditor as ClassicEditorBase } from "@ckeditor/ckeditor5-editor-classic";
import { Essentials } from "@ckeditor/ckeditor5-essentials";
import { Autoformat } from "@ckeditor/ckeditor5-autoformat";
import { Markdown } from "@ckeditor/ckeditor5-markdown-gfm";
import {
Bold,
Italic,
Underline,
Strikethrough,
Code,
// Subscript,
// Superscript,
} from "@ckeditor/ckeditor5-basic-styles";
import { BlockQuote } from "@ckeditor/ckeditor5-block-quote";
import { CodeBlock } from "@ckeditor/ckeditor5-code-block";
import Math from "@isaul32/ckeditor5-math/src/math";
import AutoformatMath from "@isaul32/ckeditor5-math/src/autoformatmath";
import { Heading } from "@ckeditor/ckeditor5-heading";
import { SourceEditing } from "@ckeditor/ckeditor5-source-editing";
import { WordCount } from "@ckeditor/ckeditor5-word-count";
import { List, TodoList } from "@ckeditor/ckeditor5-list";
// import { Alignment } from "@ckeditor/ckeditor5-alignment";
import { Link, LinkImage } from "@ckeditor/ckeditor5-link";
import {
ImageBlockEditing,
// ImageInsert,
ImageInsertViaUrl,
// ImageResize,
// ImageToolbar,
// ImageUpload,
} from "@ckeditor/ckeditor5-image";
// import { Base64UploadAdapter } from "@ckeditor/ckeditor5-upload";
import {
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
} from "@ckeditor/ckeditor5-table";
import { HorizontalLine } from "@ckeditor/ckeditor5-horizontal-line";

import { CKEditor } from "@ckeditor/ckeditor5-react";
import RenkuCKEditor from "@renku/ckeditor5-build-renku";

import "ckeditor5/ckeditor5.css";
import "./ckEditor.css";

import katex from "katex";
import "katex/dist/katex.min.css";

window.katex = katex;

class RenkuWordCount extends WordCount {
constructor(editor) {
super(editor);
this.isSourceEditingMode = false;
const sourceEditing = editor.plugins.get("SourceEditing");
sourceEditing.on(
"change:isSourceEditingMode",
(_eventInfo, _name, value) => {
if (value) {
this.isSourceEditingMode = true;
// Source editing textarea is not yet available.
setTimeout(() => {
const sourceEditingTextarea =
editor.editing.view.getDomRoot().nextSibling.firstChild;
if (sourceEditingTextarea) {
sourceEditingTextarea.addEventListener("input", (event) => {
sourceEditing.updateEditorData();
this.fire("update", {
exact: true,
words: this.words,
characters: () => event.target.value.length,
});
});
this.fire("update", {
exact: true,
words: this.words,
characters: () => sourceEditingTextarea.value.length,
});
}
});
} else {
this.isSourceEditingMode = false;
this._refreshStats();
}
}
);
}

_refreshStats() {
if (!this.isSourceEditingMode) {
const words = this.words;
const characters = this.characters;
this.fire("update", {
exact: false,
words,
characters,
});
}
}
}

class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
Essentials,
Markdown,
Autoformat,
SourceEditing,
Heading,
Bold,
Italic,
Underline,
Strikethrough,
BlockQuote,
BlockQuote,
Code,
CodeBlock,
List,
TodoList,
// Alignment,
// Superscript,
// Subscript,
Link,
LinkImage,
ImageInsertViaUrl,
ImageBlockEditing,
HorizontalLine,
Table,
TableCaption,
TableCellProperties,
TableColumnResize,
TableProperties,
TableToolbar,
// ImageBlock,
// ImageInsert,
// ImageResize,
// ImageToolbar,
// ImageUpload,
// Base64UploadAdapter,
Math,
AutoformatMath,
RenkuWordCount,
];

function CkEditor({
data,
disabled,
id,
invalid,
name,
outputType,
setInputs,
data,
disabled = false,
invalid = false,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
outputType = "html",
// eslint-disable-next-line @typescript-eslint/no-unused-vars
setInputs = (value) => {},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
wordCount = (stats) => {},
}) {
const editorConfig = {
toolbar: {
items: [
"undo",
"redo",
"|",
"heading",
"|",
"bold",
"italic",
"underline",
"strikethrough",
"blockQuote",
"|",
"code",
"codeBlock",
"|",
{
label: "List",
withText: true,
items: ["bulletedList", "numberedList", "todoList"],
},
"|",
// "alignment",
// "|",
// "superscript",
// "subscript",
"math",
"|",
"link",
"insertImage",
"|",
"horizontalLine",
"insertTable",
"|",
/*{
label: "Other",
withText: false,
items: [
"insertImage",
"resizeImage",
],
},*/
"sourceEditing",
],
},
math: {
engine: "katex",
enablePreview: true,
},
wordCount: {
onUpdate: wordCount,
},
};
return (
<CKEditor
id={id}
editor={
outputType === "markdown"
? RenkuCKEditor.RenkuMarkdownEditor
: RenkuCKEditor.RenkuHTMLEditor
}
data={data}
editor={ClassicEditor}
config={editorConfig}
disabled={disabled}
invalid={invalid}
customConfig={{ height: 500 }}
height={800}
data-cy={`ckeditor-${name}`}
onChange={(_event, editor) => {
const artificialEvent = {
target: { name: name, value: editor.getData() },
isPersistent: () => false,
onReady={(e) => {
if (disabled) {
e.ui.view.toolbar.element.style.display = "none";
}

e.data.processor._html2markdown._parser.keep("u");
e.data.processor._html2markdown._parser.addRule("math", {
filter: ["script"],
replacement: function (content) {
return "$" + content.replace(/(?:\\(.))/g, "$1") + "$";
},
});
const latex = {
name: "latex",
level: "inline",
start(src) {
return src.match(/\$/)?.index;
},
tokenizer(src) {
// Inspired by https://github.com/markedjs/marked/blob/4c5b974b391f913ac923610bd3740ef27ccdae95/src/Tokenizer.js#L647
const cap = /^(\$+)([^$]|[^$][\s\S]*?[^$])\1(?!\$)/.exec(src);
if (cap) {
let formula = cap[2].replace(/\n/g, " ");
const hasNonSpaceChars = /[^ ]/.test(formula);
const hasSpaceCharsOnBothEnds =
/^ /.test(formula) && / $/.test(formula);
if (hasNonSpaceChars && hasSpaceCharsOnBothEnds) {
formula = formula.substring(1, formula.length - 1);
}
return {
type: "latex",
raw: cap[0],
text: formula,
};
}
},
renderer({ text }) {
return `<script type="math/tex">${text}</script>`;
},
};
setInputs(artificialEvent);
e.data.processor._markdown2html._parser.use({ extensions: [latex] });
e.setData(data);

e.model.document.on("change:data", () => {
const artificialEvent = {
target: { name: name, value: e.getData() },
isPersistent: () => false,
};
setInputs(artificialEvent);
});
}}
/>
);
Expand Down
35 changes: 35 additions & 0 deletions client/src/components/form-field/LazyCkEditorRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
/*!
* Copyright 2023 - Swiss Data Science Center (SDSC)
* A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
* Eidgenössische Technische Hochschule Zürich (ETHZ).
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import { lazy, Suspense } from "react";
import { Loader } from "../Loader";

const CkEditor = lazy(() => import("./CkEditor"));

export function LazyCkEditorRenderer(props: { name: string; data: string }) {
return (
<Suspense fallback={<Loader />}>
<CkEditor
id={props.name}
name={props.name}
data={props.data}
disabled={true}
/>
</Suspense>
);
}
Loading
Loading