feat(canvas): add Add section button to outline panel

blocks/canvas/editor-utils/blocks.js

@@ -250,6 +250,13 @@ export function deleteSection(view, sectionIndex) {
   view.dispatch(view.state.tr.replaceWith(0, doc.content.size, newNodes));
 }
 
+export function insertSection(view) {
+  if (!view) return;
+  const { doc, schema } = view.state;
+  const hrNode = schema.nodes.horizontal_rule.create();
+  view.dispatch(view.state.tr.insert(doc.content.size, hrNode));
+}
+
 export function moveSection(view, fromSectionIndex, toSectionIndex, dropPosition) {
   if (!view) return;
   if (isSamePosition(fromSectionIndex, toSectionIndex, dropPosition)) return;

blocks/canvas/ew-page-outline/ew-page-outline.css

@@ -227,6 +227,31 @@
   visibility: visible;
 }
 
+.add-section-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--s2-spacing-75);
+  width: 100%;
+  padding: var(--s2-spacing-75) var(--s2-spacing-100);
+  border: none;
+  background: transparent;
+  color: var(--s2-gray-700);
+  font-family: inherit;
+  font-size: var(--s2-body-size-s);
+  font-weight: 500;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--s2-gray-75);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--s2-blue-700);
+    outline-offset: -2px;
+    border-radius: var(--s2-corner-radius-75);
+  }
+}
+
 .placeholder {
   padding: var(--s2-spacing-300) var(--s2-spacing-100);
   font-size: var(--s2-body-size-s);

blocks/canvas/ew-page-outline/ew-page-outline.js

@@ -9,6 +9,7 @@ import {
   deleteContentItem,
   deleteSection,
   insertBlockAtSectionStart,
+  insertSection,
   moveBlock,
   moveBlockToContentItem,
   moveBlockToSection,
@@ -19,6 +20,7 @@ import { fetchExtensions } from '../ew-panel-extensions/helpers.js';
 
 const DELETE_ICON_SRC = '/img/icons/s2-icon-delete-20-n.svg';
 const ADD_BLOCK_ICON_SRC = '/img/icons/s2-icon-tableadd-20-n.svg';
+const ADD_SECTION_ICON_SRC = '/img/icons/s2-icon-addcircle-20-n.svg';
 const DRAG_ICON_SRC = '/img/icons/s2-icon-draghandle-20-n.svg';
 
 const { loadStyle, hashChange } = await import(`${getNx()}/utils/utils.js`);
@@ -374,6 +376,14 @@ class EwPageOutline extends LitElement {
     openBlockLibraryModal({ onInsert });
   }
 
+  _onAddSection(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    const { view } = getExtensionsBridge();
+    if (!view) return;
+    insertSection(view);
+  }
+
   // Array position (not proseIndex) of the run holding this child, so a delete can find
   // it again afterward without comparing positions across the edit (see _onDelete).
   _findRunLocation(proseIndex) {
@@ -531,7 +541,15 @@ class EwPageOutline extends LitElement {
         : html`<ul class="outline-list" role="tree" aria-label="Page outline"
                 @keydown=${this._onTreeKeydown}>
               ${this._sections.map((sec, i) => this._renderSection(sec, i === 0))}
-            </ul>`}
+            </ul>
+            <button type="button" class="add-section-btn" draggable="false"
+                    aria-label="Add section"
+                    @click=${(e) => this._onAddSection(e)}>
+              <svg aria-hidden="true" class="icon" viewBox="0 0 20 20">
+                <use href="${ADD_SECTION_ICON_SRC}#icon"></use>
+              </svg>
+              <span>Add section</span>
+            </button>`}
       </div>
     </section>`;
   }

test/unit/blocks/canvas/editor-utils/blocks.test.js

@@ -10,6 +10,7 @@ import {
   moveBlockToSection,
   moveBlock,
   moveSection,
+  insertSection,
 } from '../../../../../blocks/canvas/editor-utils/blocks.js';
 import { makeView, makeRealView } from '../test-helpers.js';
 
@@ -436,3 +437,22 @@ describe('deleteBlock (no deliberate selection change)', () => {
     expect(docTypes(view.state.doc)).to.deep.equal(['table']);
   });
 });
+
+describe('insertSection', () => {
+  it('appends a horizontal_rule node to the end of the doc and adds a new section', () => {
+    const view = makeView({
+      type: 'doc',
+      content: [{ type: 'paragraph', content: [{ type: 'text', text: 'hello' }] }],
+    });
+
+    insertSection(view);
+
+    const { doc } = view.state;
+    expect(doc.lastChild.type.name).to.equal('horizontal_rule');
+    expect(docTypes(doc)).to.deep.equal(['paragraph', 'horizontal_rule']);
+  });
+
+  it('does nothing when view is falsy', () => {
+    expect(() => insertSection(null)).to.not.throw();
+  });
+});