KAS-4678: Update van rdfa-editor package naar meest recente versie

app/components/agenda/agendaitem/send-to-vp-modal.hbs

@@ -17,7 +17,7 @@
           <p>{{t "check-documents-to-be-sent-to-vp"}}</p>
             <ul class="au-u-margin-top au-u-margin-left-none">
             {{#each this.subcasesWithPieces as |subcaseWithPieces|}}
-              <li class="list-style-none">
+              <li class="au-c-content__list--no-style">
                 {{#if subcaseWithPieces.subcaseName}}
                   <p>
                     <strong class="auk-u-text-bold">
@@ -26,7 +26,7 @@
                   </p>
                   <ul class="au-u-margin-top-small au-u-margin-left-none">
                     {{#each subcaseWithPieces.pieces as |piece|}}
-                      <li class="list-style-none">
+                      <li class="au-c-content__list--no-style">
                         {{#if (this.isDisabled piece.accessLevel)}}
                         <AuCheckbox
                           @checked={{this.isSelected piece}}
@@ -64,15 +64,15 @@
                   </ul>
                 {{else}}
                   {{#each subcaseWithPieces.pieces as |piece|}}
-                    <li class="list-style-none">
+                    <li class="au-c-content__list--no-style">
                       {{#if (this.isDisabled piece.accessLevel)}}
                         <AuCheckbox
                           @checked={{this.isSelected piece}}
                           @onChange={{fn this.togglePieceSelection piece}}
                           @disabled={{true}}
                         >
                           <LinkTo
-                            @route="document" 
+                            @route="document"
                             @model={{piece.id}}
                             disabled={{true}}
                           >

app/components/sanitize-html.js

@@ -6,7 +6,8 @@ import { isPresent } from '@ember/utils';
 const additionalAllowedTags = ['del'];
 const additionalAllowedAttributes = {
   '*': ['data-indentation-level'],
-  'ol': ['data-list-style'],
+  'ol': ['style', 'data-hierarchical', 'data-list-style'],
+  'li': ['data-list-marker'],
   'table': [
     {
       name: 'id',
@@ -20,6 +21,11 @@ const additionalAllowedAttributes = {
     },
   ],
 };
+const additionalAllowedStyles = {
+  'ol': {
+    'list-style-type': [/.*/]
+  }
+}
 
 export default class SanitizeHtmlComponent extends Component {
   constructor() {
@@ -31,6 +37,7 @@ export default class SanitizeHtmlComponent extends Component {
     const options = this.args.options || {};
     options.allowedTags = isPresent(options.allowedTags) ? options.allowedTags : sanitizeHtml.defaults.allowedTags.concat(additionalAllowedTags); // add more tags to the default allowed tags
     options.allowedAttributes = isPresent(options.allowedAttributes) ? options.allowedAttributes : assign(sanitizeHtml.defaults.allowedAttributes, additionalAllowedAttributes); // add more attributes to the default allowed attributes
+    options.allowedStyles = isPresent(options.allowedStyles) ? options.allowedStyles : assign(sanitizeHtml.defaults.allowedStyles, additionalAllowedStyles); // add more styles to the default allowed styles
     const value = Array.isArray(this.args.value) ? this.args.value.join(' - ') : this.args.value || '';
     return sanitizeHtml(value, options) || '';
   }

app/components/web-components/rdfa-editor.hbs

@@ -2,41 +2,41 @@
   {{#if this.browserIsSupported}}
     <EditorContainer>
       <:top>
-        <Toolbar as |Tb|>
-          <Tb.Group>
-            <Plugins::History::Undo @controller={{this.controller}} />
-            <Plugins::History::Redo @controller={{this.controller}} />
-          </Tb.Group>
-          <Tb.Group>
-            <Plugins::Heading::HeadingMenu @controller={{this.controller}} />
-          </Tb.Group>
-          <Tb.Group>
-            <Plugins::TextStyle::Bold @controller={{this.controller}} />
-            <Plugins::TextStyle::Italic @controller={{this.controller}} />
-            <Plugins::TextStyle::Strikethrough
-              @controller={{this.controller}}
-            />
-            <Plugins::TextStyle::Underline @controller={{this.controller}} />
-            <Plugins::TextStyle::Subscript @controller={{this.controller}} />
-            <Plugins::TextStyle::Superscript @controller={{this.controller}} />
-          </Tb.Group>
-          <Tb.Group>
-            <Plugins::Indentation::IndentationMenu @controller={{this.controller}} />
-          </Tb.Group>
-          <Tb.Group>
-            <Plugins::List::Unordered @controller={{this.controller}} />
-            <Plugins::List::Ordered @controller={{this.controller}} />
-          </Tb.Group>
-          <Tb.Group>
-            <Plugins::Table::TableMenu @controller={{this.controller}} />
-          </Tb.Group>
-        </Toolbar>
+        <ResponsiveToolbar>
+          <:main as |Tb|>
+            <Tb.Group>
+              <Plugins::History::Undo @controller={{this.controller}} />
+              <Plugins::History::Redo @controller={{this.controller}} />
+            </Tb.Group>
+            <Tb.Group>
+              <Plugins::Heading::HeadingMenu @controller={{this.controller}} />
+            </Tb.Group>
+            <Tb.Group>
+              <Plugins::TextStyle::Bold @controller={{this.controller}} />
+              <Plugins::TextStyle::Italic @controller={{this.controller}} />
+              <Plugins::TextStyle::Strikethrough @controller={{this.controller}} />
+              <Plugins::TextStyle::Underline @controller={{this.controller}} />
+              <Plugins::TextStyle::Subscript @controller={{this.controller}} />
+              <Plugins::TextStyle::Superscript @controller={{this.controller}} />
+            </Tb.Group>
+            <Tb.Group>
+              <Plugins::Indentation::IndentationMenu @controller={{this.controller}} />
+            </Tb.Group>
+            <Tb.Group>
+              <Plugins::List::Unordered @controller={{this.controller}} />
+              <Plugins::List::Ordered @controller={{this.controller}} @enableHierarchicalList={{true}} />
+            </Tb.Group>
+            <Tb.Group>
+              <Plugins::Table::TableMenu @controller={{this.controller}} />
+            </Tb.Group>
+          </:main>
+        </ResponsiveToolbar>
       </:top>
       <:default>
         <Editor
+          @plugins={{this.plugins}}
           @schema={{this.schema}}
           @rdfaEditorInit={{this.onEditorInit}}
-          @plugins={{this.plugins}}
         />
       </:default>
     </EditorContainer>

app/components/web-components/rdfa-editor.js

@@ -3,8 +3,37 @@ import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { isPresent } from '@ember/utils';
-
-import { Schema } from '@lblod/ember-rdfa-editor';
+import { Schema } from 'prosemirror-model';
+import {
+  em,
+  strikethrough,
+  strong,
+  subscript,
+  superscript,
+  underline,
+} from '@lblod/ember-rdfa-editor/plugins/text-style';
+import {
+  block_rdfa,
+  doc,
+  hard_break,
+  invisible_rdfa,
+  paragraph,
+  repaired_block,
+  text,
+} from '@lblod/ember-rdfa-editor/nodes';
+import { inline_rdfa } from '@lblod/ember-rdfa-editor/marks';
+import {
+  tableKeymap,
+  tableNodes,
+  tablePlugins,
+} from '@lblod/ember-rdfa-editor/plugins/table';
+import {
+  bulletListWithConfig,
+  listItemWithConfig,
+  listTrackingPlugin,
+  orderedListWithConfig,
+} from '@lblod/ember-rdfa-editor/plugins/list';
+import { heading } from '@lblod/ember-rdfa-editor/plugins/heading';
 
 export const section_rdfa = {
   content: 'block+',
@@ -27,44 +56,8 @@ export const section_rdfa = {
   },
 }
 
-import {
-  block_rdfa,
-  doc,
-  hard_break,
-  invisible_rdfa,
-  paragraph,
-  repaired_block,
-  text,
-} from '@lblod/ember-rdfa-editor/nodes';
-
-import { inline_rdfa } from '@lblod/ember-rdfa-editor/marks';
-
-import {
-  em,
-  strikethrough,
-  strong,
-  subscript,
-  superscript,
-  underline,
-} from '@lblod/ember-rdfa-editor/plugins/text-style';
-
-import {
-  tableKeymap,
-  tableNodes,
-  tablePlugin,
-} from '@lblod/ember-rdfa-editor/plugins/table';
-
-import {
-  bullet_list,
-  list_item,
-  ordered_list,
-} from '@lblod/ember-rdfa-editor/plugins/list';
-
-import { heading } from '@lblod/ember-rdfa-editor/plugins/heading';
-
 export default class WebComponentsRdfaEditor extends Component {
   @service userAgent;
-
   @tracked controller;
 
   get sizeClass() {
@@ -74,7 +67,11 @@ export default class WebComponentsRdfaEditor extends Component {
   }
 
   get plugins() {
-    return [tablePlugin, tableKeymap];
+    return [
+      listTrackingPlugin(),
+      ...tablePlugins,
+      tableKeymap,
+    ];
   }
 
   get browserName() {
@@ -100,9 +97,9 @@ export default class WebComponentsRdfaEditor extends Component {
         paragraph,
         section_rdfa,
         repaired_block,
-        list_item,
-        ordered_list,
-        bullet_list,
+        list_item: listItemWithConfig({ enableHierarchicalList: true }),
+        ordered_list: orderedListWithConfig({ enableHierarchicalList: true }),
+        bullet_list: bulletListWithConfig({ enableHierarchicalList: true }),
         ...tableNodes({ tableGroup: 'block', cellContent: 'block+' }),
         heading,
         text,

app/styles/addon-overrides/_ember-rdfa-editor.scss

@@ -4,7 +4,7 @@
 
 // Variables
 
-$say-toolbar-background: var(--au-white);
+// $say-toolbar-background: var(--au-white);
 $say-editor-background: var(--au-white);
 $say-editor-padding: 1rem;
 $say-paper-min-height: 120rem;
@@ -32,6 +32,19 @@ $say-editor-border-radius: $au-input-border-radius;
 @import 'ember-rdfa-editor/shame';
 
 
+// Copy from ember-rdfa-editor package as we can't individually import this yet
+
+ol > li[data-list-marker]::marker {
+  content: attr(data-list-marker);
+  font-variant-numeric: tabular-nums;
+}
+
+ol > *[data-content-container] > li[data-list-marker]::marker {
+  content: attr(data-list-marker);
+  font-variant-numeric: tabular-nums;
+}
+
+
 // Overrides
 
 .say-container {
@@ -52,32 +65,6 @@ $say-editor-border-radius: $au-input-border-radius;
   }
 }
 
-.say-toolbar {
-  border-bottom-color: $say-editor-border-color;
-  border-top-left-radius: $say-editor-border-radius;
-  border-top-right-radius: $say-editor-border-radius;
-}
-
-.say-toolbar__group {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.say-toolbar__button,
-.say-dropdown__button {
-  &:focus {
-    outline-offset: -0.3rem;
-  }
-}
-
-.say-toolbar__button + .say-toolbar__button {
-  border-left-color: $say-editor-border-color;
-}
-
-.say-dropdown + .say-toolbar__button {
-  border-left: 0.1rem solid $say-editor-border-color;
-}
-
 .say-container__main {
   border-bottom-right-radius: $say-editor-border-radius;
   border-bottom-left-radius: $say-editor-border-radius;
@@ -123,60 +110,22 @@ $say-editor-border-radius: $au-input-border-radius;
     @include au-font-size(1.8rem);
   }
 
-  > * + * {
-    margin-top: 1.5rem;
-  }
-
-  > p + ul,
-  > p + ol {
-    margin-top: 0;
+  p:not(.say-hidden) + :is(ul, ol) {
+    margin-top: 0.2rem;
   }
 
-  > ul[data-list-style='upper-alpha'] + p,
-  > ol[data-list-style='upper-alpha'] + p {
-    margin-top: 0;
-  }
-
-  ul,
-  ol {
-    padding-left: 5.8rem; // `margin-left: 2.8rem;` replaced by 3rem (default padding-left) + 2.8rem (default margin-left)
-
-    ul,
-    ol {
-      padding-left: 3.8rem;
-    }
-
-    &[data-list-style='upper-alpha'] {
-      padding-left: 2.9rem;
-
-      ol {
-        padding-left: 1.9rem;
-      }
+  ul, ol {
+    p:not(.say-hidden) + :is(ul, ol) {
+      margin-top: 0;
     }
   }
 
-  @mixin decimal-extended-styling($levels, $current-level: 1) {
-    padding-left: 0;
-
-    > li {
-      &:before {
-        @if $current-level == 1 {
-          min-width: 5.8rem;
-        } @else {
-          min-width: 3.8rem;
-        }
-      }
-
-      @if $current-level < $levels {
-        > ol:not([data-list-style]) {
-          @include decimal-extended-styling($levels, $current-level + 1);
-        }
-      }
-    }
-  }
+  ol[style*="upper-alpha"] {
+    padding-left: 2rem;
 
-  ol[data-list-style='decimal-extended'] {
-    @include decimal-extended-styling(5, 1);
+    ol[style*="upper-alpha"] {
+      padding-left: 3rem;
+    }
   }
 }