Merge branch 'main' into renovate/configure

.eslintrc.cjs

@@ -43,7 +43,10 @@ module.exports = {
   overrides: [
     {
       files: ['test/**/*.js'],
-      rules: { 'no-console': 'off' },
+      rules: {
+        'no-console': 'off',
+        'import/no-unresolved': 'off',
+      },
     },
   ],
   plugins: [

blocks/browse/da-orgs/da-orgs.js

@@ -75,7 +75,7 @@ export default class DaOrgs extends LitElement {
               </div>
             </a>
           </li>`)}
-          ${this._orgs.length > 1 ? html`
+          ${this._orgs.length > 4 ? html`
             <li>
               <a class="da-org new" href="/start">
                 <div class="new-icon">

blocks/da-view/da-view-wc.css

@@ -22,7 +22,9 @@ h1 {
 }
 
 .da-content img {
+  object-fit: contain;
   max-width: 100%;
+  height: 600px;
   box-shadow: rgb(181 181 181) 0 0 20px 0;
 }
 

blocks/da-view/da-view.js

@@ -21,7 +21,7 @@ class DaView extends LitElement {
         <h1>${this.details.name}</h1>
       </div>
       <div class="da-content">
-        <img src="${this.details.contentUrl}" />
+        <img src="${this.details.contentUrl}" width="900" height="600" />
       </div>
     `;
   }

blocks/edit/da-editor/da-editor.css

@@ -195,10 +195,22 @@ span.ProseMirror-menuseparator {
   background: url('/blocks/edit/img/Smock_Unlink_18_N.svg') center / 18px no-repeat #EFEFEF;
 }
 
-.edit-list {
+.bullet-list, .ProseMirror-menu-dropdown.list-menu {
   background: url('/blocks/edit/img/Smock_TextBulleted_18_N.svg') center / 18px no-repeat #EFEFEF;
 }
 
+.ordered-list {
+  background: url('/blocks/edit/img/Smock_TextNumbered_18_N.svg') center / 18px no-repeat #EFEFEF;
+}
+
+.indent-list {
+  background: url('/blocks/edit/img/Smock_TextIndentIncrease_18_N.svg') center / 18px no-repeat #EFEFEF;
+}
+
+.outdent-list {
+  background: url('/blocks/edit/img/Smock_TextIndentDecrease_18_N.svg') center / 18px no-repeat #EFEFEF;
+}
+
 .insert-table {
   background: url('/blocks/edit/img/Smock_TableAdd_18_N.svg') center / 18px no-repeat #EFEFEF;
 }
@@ -263,7 +275,7 @@ span.ProseMirror-menuseparator {
   background: url('/blocks/edit/img/Smock_Redo_18_N.svg') center / 18px no-repeat #EFEFEF;
 }
 
-/* Generic ProseMirror Styles */  
+/* Generic ProseMirror Styles */
 .ProseMirror hr {
   border-radius: 1px;
   border: 1px solid #b3b3b3;

blocks/edit/da-library/da-library.js

@@ -127,7 +127,7 @@ class DaLibrary extends LitElement {
         <li class="da-library-type-item">
           <button class="da-library-type-item-btn"
             @click=${() => this.handleItemClick(item)}>
-            <div class="da-library-type-item-detail"> 
+            <div class="da-library-type-item-detail">
               ${item.icon ? until(this.renderIcon(item.icon)) : ''}
               <span>${name}</span>
               <svg class="icon">
@@ -193,13 +193,24 @@ class DaLibrary extends LitElement {
 
 customElements.define('da-library', DaLibrary);
 
+const CLOSE_DROPDOWNS_EVENT = 'pm-close-dropdowns';
+
 export default function open() {
   const palettePane = window.view.dom.nextElementSibling;
   const existingPalette = palettePane.querySelector('da-library');
   if (existingPalette) {
     existingPalette.remove();
     return;
   }
+  // close any other dropdowns
+  window.dispatchEvent(new CustomEvent(CLOSE_DROPDOWNS_EVENT));
+
   const palette = document.createElement('da-library');
   palettePane.append(palette);
+
+  const closePaletteListener = () => {
+    palette.remove();
+    window.removeEventListener(CLOSE_DROPDOWNS_EVENT, closePaletteListener);
+  };
+  window.addEventListener(CLOSE_DROPDOWNS_EVENT, closePaletteListener);
 }

blocks/edit/da-title/da-title.js

@@ -41,6 +41,7 @@ export default class DaTitle extends LitElement {
     const { hash } = window.location;
     const pathname = hash.replace('#', '');
     // Only save to DA if it is a sheet or config
+
     if (this.details.view === 'sheet') {
       const dasSave = await saveToDa(pathname, this.sheet);
       if (!dasSave.ok) return;

blocks/edit/prose/index.js

@@ -14,6 +14,8 @@ import {
   goToNextCell,
   tableNodes,
   fixTables,
+  liftListItem,
+  sinkListItem,
   gapCursor,
   Y,
   WebsocketProvider,
@@ -262,6 +264,8 @@ export default function initProse({ editor, path }) {
         Tab: goToNextCell(1),
         'Shift-Tab': goToNextCell(-1),
       }),
+      keymap({ 'Shift-Tab': liftListItem(schema.nodes.list_item) }),
+      keymap({ Tab: sinkListItem(schema.nodes.list_item) }),
       gapCursor(),
       history(),
     ],

blocks/edit/prose/plugins/menu.js

@@ -19,6 +19,8 @@ import {
   undo,
   redo,
   wrapInList,
+  liftListItem,
+  sinkListItem,
 // eslint-disable-next-line import/no-unresolved
 } from 'da-y-wrapper';
 
@@ -55,10 +57,6 @@ function cmdItem(cmd, options) {
   return new MenuItem(passedOptions);
 }
 
-function wrapListItem(nodeType, options) {
-  return cmdItem(wrapInList(nodeType, options.attrs), options);
-}
-
 function markActive(state, type) {
   const { from, to, $from, $to, empty } = state.selection;
   if (empty) {
@@ -284,6 +282,49 @@ function getTextBlocks(marks, nodes) {
   ];
 }
 
+function shouldEnableIndentOutdentIcon(state, listType) {
+  const { $from } = state.selection;
+  if ($from.node($from.depth - 1)?.type === listType) return true;
+  return false;
+}
+
+function getListMenu(nodes) {
+  return [
+    new MenuItem({
+      title: 'Bullet List',
+      label: 'Bullet List',
+      class: 'bullet-list',
+      run(initialState, dispatch) {
+        wrapInList(nodes.bullet_list)(initialState, dispatch);
+      },
+    }),
+    new MenuItem({
+      title: 'Ordered List',
+      label: 'Ordered List',
+      class: 'ordered-list',
+      run(state, dispatch) {
+        wrapInList(nodes.ordered_list)(state, dispatch);
+      },
+    }),
+    new MenuItem({
+      title: 'Indent List',
+      label: 'Indent List',
+      class: 'indent-list',
+      enable(state) { return shouldEnableIndentOutdentIcon(state, nodes.list_item); },
+      run(state, dispatch) {
+        sinkListItem(nodes.list_item)(state, dispatch);
+      },
+    }),
+    new MenuItem({
+      title: 'Outdent List',
+      label: 'Outdent List',
+      class: 'outdent-list',
+      enable(state) { return shouldEnableIndentOutdentIcon(state, nodes.list_item); },
+      run: liftListItem(nodes.list_item),
+    }),
+  ];
+}
+
 function getMenu(view) {
   const menu = document.createElement('div');
   menu.className = 'ProseMirror-menubar';
@@ -302,10 +343,9 @@ function getMenu(view) {
   ];
 
   const listMenu = [
-    wrapListItem(nodes.bullet_list, {
-      title: 'Wrap in bullet list',
-      label: 'List',
-      class: 'edit-list',
+    new Dropdown(getListMenu(nodes), {
+      label: 'List Menu',
+      class: 'list-menu',
     }),
   ];
 
@@ -314,7 +354,9 @@ function getMenu(view) {
       title: 'Open library',
       label: 'Library',
       enable() { return true; },
-      run() { openLibrary(); },
+      run() {
+        openLibrary();
+      },
       class: 'open-library',
     }),
     new MenuItem({

blocks/edit/utils/helpers.js

@@ -111,8 +111,9 @@ async function saveHtml(fullPath) {
   return daFetch(fullPath, opts);
 }
 
-async function saveJson(fullPath, sheet, dataType = 'blob') {
+function formatSheetData(sheet) {
   const jData = sheet.getData();
+
   const data = jData.reduce((acc, row, idx) => {
     if (idx > 0) {
       const rowObj = {};
@@ -137,10 +138,31 @@ async function saveJson(fullPath, sheet, dataType = 'blob') {
       emptyRow = false;
     }
   }
+  return data;
+}
 
-  console.log(data);
-
-  const json = { total: data.length, offset: 0, limit: data.length, data, ':type': 'sheet' };
+async function saveJson(fullPath, sheets, dataType = 'blob') {
+  let json;
+  const formatted = sheets.reduce((acc, sheet) => {
+    const data = formatSheetData(sheet);
+    acc[sheet.name] = {
+      total: data.length,
+      limit: data.length,
+      offset: 0,
+      data,
+    };
+    return acc;
+  }, {});
+
+  if (sheets.length > 1) {
+    formatted[':names'] = sheets.map((sheet) => sheet.name);
+    formatted[':version'] = 3;
+    formatted[':type'] = 'multi-sheet';
+    json = formatted;
+  } else {
+    json = formatted[sheets[0].name];
+    json[':type'] = 'sheet';
+  }
 
   const formData = new FormData();
 

blocks/shared/constants.js

@@ -4,7 +4,7 @@ export const AEM_ORIGIN = 'https://admin.hlx.page';
 const DA_ADMIN_ENVS = {
   local: 'http://localhost:8787',
   stage: 'https://stage-admin.da.live',
-  prod: 'https://da.live/api',
+  prod: 'https://admin.da.live',
 };
 
 const DA_COLLAB_ENVS = {

blocks/shared/prose2aem.js

@@ -111,6 +111,15 @@ function removeMetadata(editor) {
   editor.querySelector('.metadata')?.remove();
 }
 
+const iconRegex = /:([a-zA-Z0-9-]+?):/gm; // any alphanumeric character or - surrounded by :
+function parseIcons(editor) {
+  if (!iconRegex.test(editor.innerHTML)) return;
+  editor.innerHTML = editor.innerHTML.replace(
+    iconRegex,
+    (_, iconName) => `<span class="icon icon-${iconName}"></span>`,
+  );
+}
+
 export default function prose2aem(editor, live) {
   editor.removeAttribute('class');
   editor.removeAttribute('contenteditable');
@@ -137,7 +146,10 @@ export default function prose2aem(editor, live) {
 
   convertBlocks(editor);
 
-  if (live) removeMetadata(editor);
+  if (live) {
+    removeMetadata(editor);
+    parseIcons(editor);
+  }
 
   makePictures(editor);