feat(editor): integrate styles support

src/public/app/widgets/type_widgets/ckeditor/config.ts

@@ -96,11 +96,45 @@ export function buildConfig() {
             defaultProtocol: "https://",
             allowedProtocols: ALLOWED_PROTOCOLS
         },
+        style: {
+            definitions: buildStyleDefinitions()
+        },
         // This value must be kept in sync with the language defined in webpack.config.js.
         language: "en"
     };
 }
 
+function buildStyleDefinitions() {
+    const element = "blockquote";
+    return [
+        {
+            name: "Note",
+            element,
+            classes: [ "admonition", "note" ]
+        },
+        {
+            name: "Tip",
+            element,
+            classes: [ "admonition", "tip" ]
+        },
+        {
+            name: "Important",
+            element,
+            classes: [ "admonition", "important" ]
+        },
+        {
+            name: "Caution",
+            element,
+            classes: [ "admonition", "caution" ]
+        },
+        {
+            name: "Warning",
+            element,
+            classes: [ "admonition", "warning" ]
+        }
+    ];
+}
+
 export function buildToolbarConfig(isClassicToolbar: boolean) {
     if (isClassicToolbar) {
         const multilineToolbar = utils.isDesktop() && options.get("textNoteEditorMultilineToolbar") === "true";
@@ -115,6 +149,7 @@ function buildClassicToolbar(multilineToolbar: boolean) {
     return {
         toolbar: {
             items: [
+                "style",
                 "heading",
                 "fontSize",
                 "|",
@@ -180,6 +215,7 @@ function buildFloatingToolbar() {
         },
 
         blockToolbar: [
+            "style",
             "heading",
             "|",
             "bulletedList",

src/public/stylesheets/style.css

@@ -1706,3 +1706,8 @@ footer.file-footer {
 footer.file-footer button {
     margin: 5px;
 }
+
+.ck-content .admonition {
+    box-shadow: var(--card-box-shadow);
+    padding: 1em;
+}