Merge pull request #1847 from TriliumNext/feature/ckeditor_lib

Integrate CKEditor into the monorepo

Author: eliandoran

.gitignore

@@ -40,4 +40,7 @@ test-output
 
 apps/*/data
 apps/*/out
-upload
+upload
+
+.rollup.cache
+*.tsbuildinfo

apps/client/src/libraries/ckeditor/ckeditor-content.css renamed to _regroup/ckeditor5-build-trilium/ckeditor-content.css

@@ -1,48 +1,3 @@
-/* !!!!!! TRILIUM CUSTOM CHANGES !!!!!! */
-
-.printed-content .ck-widget__selection-handle, .printed-content .ck-widget__type-around { /* gets rid of triangles: https://github.com/zadam/trilium/issues/1129 */
-    display: none;
-}
-
-.page-break {
-    page-break-after: always;
-}
-
-.printed-content .page-break:after,
-.printed-content .page-break > * {
-    display: none !important;
-}
-
-.ck-content li p {
-    margin: 0 !important;
-}
-
-.admonition {
-    --accent-color: var(--card-border-color);
-    border: 1px solid var(--accent-color);
-    box-shadow: var(--card-box-shadow);
-    background: var(--card-background-color);
-    border-radius: 0.5em;
-    padding: 1em;
-    margin: 1.25em 0;
-    position: relative;
-    overflow: hidden;
-}
-
-.admonition p:last-child {
-    margin-bottom: 0;
-}
-
-.admonition p, h2 {
-    margin-top: 0;
-}
-
-.admonition.note { --accent-color: #69c7ff; }
-.admonition.tip { --accent-color: #40c025; }
-.admonition.important { --accent-color: #9839f7; }
-.admonition.caution { --accent-color: #ff2e2e; }
-.admonition.warning { --accent-color: #e2aa03; }
-
 /*
  * CKEditor 5 (v41.0.0) content styles.
  * Generated on Fri, 26 Jan 2024 10:23:49 GMT.

_regroup/ckeditor5-file-upload/theme/fileupload.css

@@ -0,0 +1,30 @@
+.ck.ck-sticky-panel > .ck-progress-bar {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+
+	border-left: 1px solid var(--ck-color-base-border);
+	border-top: 1px solid var(--ck-color-base-border);
+	border-right: 1px solid var(--ck-color-base-border);
+}
+
+.ck.ck-sticky-panel > .ck-progress-bar > .ck-uploading-progress {
+	align-self: center;
+	padding: 3px 5px;
+	font-weight: bold;
+
+	color: var(--ck-color-base-foreground);
+	background-color: var(--ck-color-base-border);
+
+	transition-property: width;
+	transition-duration: .5s;
+	transition-timing-function: linear;
+
+}
+
+.ck.ck-sticky-panel > .ck-progress-bar > .ck-uploading-cancel {
+	align-self: flex-end;
+	padding: 0 5px;
+	font-weight: bold;
+	color: var(--ck-color-base-error);
+}

apps/client/package.json

@@ -21,6 +21,7 @@
     "@mermaid-js/layout-elk": "0.1.7",
     "@mind-elixir/node-menu": "1.0.5",
     "@popperjs/core": "2.11.8",
+    "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/commons": "workspace:*",
     "bootstrap": "5.3.6",
     "dayjs": "1.11.13",
@@ -51,12 +52,14 @@
     "vanilla-js-wheel-zoom": "9.0.4"
   },
   "devDependencies": {
+    "@ckeditor/ckeditor5-inspector": "4.1.0",
     "@types/bootstrap": "5.2.10",
     "@types/jquery": "3.5.32",
     "@types/leaflet": "1.9.17",
     "@types/leaflet-gpx": "1.3.7",
     "@types/react": "18.3.21",
     "@types/react-dom": "18.3.7",
+    "copy-webpack-plugin": "13.0.0",
     "happy-dom": "17.4.6",
     "script-loader": "0.7.2"
   },

apps/client/src/components/app_context.ts

@@ -26,6 +26,7 @@ import type TypeWidget from "../widgets/type_widgets/type_widget.js";
 import type EditableTextTypeWidget from "../widgets/type_widgets/editable_text.js";
 import type { NativeImage, TouchBar } from "electron";
 import TouchBarComponent from "./touch_bar.js";
+import type { CKTextEditor } from "@triliumnext/ckeditor5";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootWidget;
@@ -187,7 +188,7 @@ export type CommandMappings = {
         callback: (value: NoteDetailWidget | PromiseLike<NoteDetailWidget>) => void;
     };
     executeWithTextEditor: CommandData &
-    ExecuteCommandData<TextEditor> & {
+    ExecuteCommandData<CKTextEditor> & {
         callback?: GetTextEditorCallback;
     };
     executeWithCodeEditor: CommandData & ExecuteCommandData<CodeMirrorInstance>;

apps/client/src/components/note_context.ts

@@ -10,13 +10,14 @@ import options from "../services/options.js";
 import type { ViewScope } from "../services/link.js";
 import type FNote from "../entities/fnote.js";
 import type TypeWidget from "../widgets/type_widgets/type_widget.js";
+import type { CKTextEditor } from "@triliumnext/ckeditor5";
 
 export interface SetNoteOpts {
     triggerSwitchEvent?: unknown;
     viewScope?: ViewScope;
 }
 
-export type GetTextEditorCallback = (editor: TextEditor) => void;
+export type GetTextEditorCallback = (editor: CKTextEditor) => void;
 
 class NoteContext extends Component implements EventListener<"entitiesReloaded"> {
     ntxId: string | null;
@@ -298,7 +299,7 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     }
 
     async getTextEditor(callback?: GetTextEditorCallback) {
-        return this.timeout<TextEditor>(
+        return this.timeout<CKTextEditor>(
             new Promise((resolve) =>
                 appContext.triggerCommand("executeWithTextEditor", {
                     callback,