Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: how we added table support #106

Open
nathancolgate opened this issue Sep 2, 2023 · 1 comment
Open

Docs: how we added table support #106

nathancolgate opened this issue Sep 2, 2023 · 1 comment

Comments

@nathancolgate
Copy link
Contributor

Leaving this here as a rough start to writing the docs for adding tables:

We have a custom editor:

// This custom editor
// extends the default tiptap editor to have a toolbar
// with table editing buttons in it.

import { html } from "lit"
import { TipTapEditor } from "rhino-editor/exports/elements/tip-tap-editor.js"
import * as table_icons from "./table_icons.js"
import * as table_translations from "./table_translations.js"

class CustomEditor extends TipTapEditor {
  renderToolbar() {
    if (this.readonly) return html``;

    return html`
      <slot name="toolbar">
        <role-toolbar class="toolbar" part="toolbar" role="toolbar">
          <slot name="toolbar-start">${this.renderToolbarStart()}</slot>

          <!-- Bold -->
          <slot name="before-bold-button"></slot>
          <slot name="bold-button">${this.renderBoldButton()}</slot>
          <slot name="after-bold-button"></slot>

          <!-- Italic -->
          <slot name="before-italic-button"></slot>
          <slot name="italic-button">${this.renderItalicButton()}</slot>
          <slot name="after-italic-button"></slot>

          <!-- Strike -->
          <slot name="before-strike-button"></slot>
          <slot name="strike-button">${this.renderStrikeButton()}</slot>
          <slot name="after-strike-button"></slot>

          <!-- Link -->
          <slot name="before-link-button"></slot>
          <slot name="link-button">${this.renderLinkButton()}</slot>
          <slot name="after-link-button"></slot>

          <!-- Heading -->
          <slot name="before-heading-button"></slot>
          <slot name="heading-button">${this.renderHeadingButton()}</slot>
          <slot name="after-heading-button"></slot>

          <!-- Blockquote -->
          <slot name="before-blockquote-button"></slot>
          <slot name="blockquote-button">${this.renderBlockquoteButton()}</slot>
          <slot name="after-blockquote-button"></slot>

          <!-- Code block -->
          <slot name="before-code-block-button"></slot>
          <slot name="code-block-button">${this.renderCodeBlockButton()}</slot>
          <slot name="after-code-block-button"></slot>

          <!-- Bullet List -->
          <slot name="before-bullet-list-button"></slot>
          <slot name="bullet-list-button"
            >${this.renderBulletListButton()}</slot
          >
          <slot name="after-bullet-list-button"></slot>

          <!-- Ordered list -->
          <slot name="before-ordered-list-button"></slot>
          <slot name="ordered-list-button">
            ${this.renderOrderedListButton()}
          </slot>
          <slot name="after-ordered-list-button"></slot>

          <slot name="before-decrease-indentation-button"></slot>
          <slot name="decrease-indentation-button"
            >${this.renderDecreaseIndentation()}</slot
          >
          <slot name="after-decrease-indentation-button"></slot>

          <slot name="before-increase-indentation-button"></slot>
          <slot name="increase-indentation-button"
            >${this.renderIncreaseIndentation()}</slot
          >
          <slot name="after-increase-indentation-button"></slot>

          <slot name="table-button"
            >
            ${this.renderTableButton()}
            </slot
          >

          <!-- Attachments -->
          <slot name="before-attach-files-button"></slot>
          <slot name="attach-files-button"
            >${this.renderAttachmentButton()}</slot
          >
          <slot name="after-attach-files-button"></slot>


          <!-- Undo -->
          <slot name="before-undo-button"></slot>
          <!-- @ts-expect-error -->
          <slot name="undo-button"> ${this.renderUndoButton()} </slot>
          <slot name="after-undo-button"></slot>

          <!-- Redo -->
          <slot name="before-redo-button"></slot>
          <slot name="redo-button"> ${this.renderRedoButton()} </slot>
          <slot name="after-redo-button"></slot>

          <slot name="toolbar-end">${this.renderToolbarEnd()}</slot>
        </role-toolbar>

        ${this.renderTableMenu()}
      </slot>
    `;
  }

  renderTableButton() {
    const tableEnabled = true; // Boolean(this.editor?.commands.setAttachment);

    if (!tableEnabled) return html``;

    const isDisabled = this.editor == null;
    return html`
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled=${isDisabled}
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.insertTable}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.insertTable}</slot>

      </button>
    `;
  }
  renderTableMenu() {
    if (!this.editor.isActive('table')) return html``;
    return html`
      <role-toolbar class="toolbar" part="toolbar" role="toolbar">
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled="false"
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().deleteTable().run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.deleteTable}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.deleteTable}</slot>
      </button>
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled="false"
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().addColumnBefore().run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.addColumnBefore}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.addColumnBefore}</slot>
      </button>
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled="false"
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().addColumnAfter().run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.addColumnAfter}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.addColumnAfter}</slot>
      </button>
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled="false"
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().deleteColumn().run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.deleteColumn}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.deleteColumn}</slot>
      </button>
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled="false"
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().addRowBefore().run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.addRowBefore}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.addRowBefore}</slot>
      </button>
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled="false"
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().addRowAfter().run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.addRowAfter}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.addRowAfter}</slot>
      </button>
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled="false"
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().deleteRow().run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.deleteRow}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.deleteRow}</slot>
      </button>
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled="false"
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().mergeOrSplit().run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.mergeOrSplit}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.mergeOrSplit}</slot>
      </button>
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled="false"
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().toggleHeaderRow().run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.toggleHeaderRow}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.toggleHeaderRow}</slot>
      </button>
      <button
        class="toolbar__button rhino-toolbar-button"
        type="button"
        aria-describedby="table"
        aria-disabled="false"
        data-role="toolbar-item"
        @click=${function(e) {
          this.editor.chain().focus().toggleHeaderColumn().run()
        }}
      >
        <slot name="table-tooltip">
          <role-tooltip
            id="table"
            hoist
            part="toolbar-tooltip toolbar-tooltip__table"
            exportparts=${this.__tooltipExportParts}
          >
            ${table_translations.toggleHeaderColumn}
          </role-tooltip>
        </slot>
        <slot name="table-icon">${table_icons.toggleHeaderColumn}</slot>
      </button>
      </role-toolbar>
    `;
  }
}

CustomEditor.define("rhino-editor")

With some new table icons:

import { html, svg } from "lit";

function toSvg(path, size = 24) {
  return html`
    <svg
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      fill="currentColor"
      viewBox="0 0 ${size} ${size}"
      width="${size}px"
      height="${size}px"
      part="toolbar__icon"
    >
      ${path}
    </svg>
  `
}

export const insertTable = toSvg(
  svg`<path pid="0" fill-rule="evenodd" d="M17 17v5h2a3 3 0 0 0 3-3v-2h-5zm-2 0H9v5h6v-5zm2-2h5V9h-5v6zm-2 0V9H9v6h6zm2-8h5V5a3 3 0 0 0-3-3h-2v5zm-2 0V2H9v5h6zm9 9.177V19a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h14a5 5 0 0 1 5 5v2.823a.843.843 0 0 1 0 .354v7.646a.843.843 0 0 1 0 .354zM7 2H5a3 3 0 0 0-3 3v2h5V2zM2 9v6h5V9H2zm0 8v2a3 3 0 0 0 3 3h2v-5H2z"></path>`
);

export const deleteTable = toSvg(
  svg`<path pid="0" d="M19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm-2.5 5.938h5a.937.937 0 1 0 0-1.875h-5a.937.937 0 1 0 0 1.875zM12.29 17H9v5h3.674c.356.75.841 1.426 1.427 2H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h14a5 5 0 0 1 5 5v2.823a.843.843 0 0 1 0 .354V14.1a7.018 7.018 0 0 0-2-1.427V9h-5v3.29a6.972 6.972 0 0 0-2 .965V9H9v6h4.255a6.972 6.972 0 0 0-.965 2zM17 7h5V5a3 3 0 0 0-3-3h-2v5zm-2 0V2H9v5h6zM7 2H5a3 3 0 0 0-3 3v2h5V2zM2 9v6h5V9H2zm0 8v2a3 3 0 0 0 3 3h2v-5H2z"></path>`
);

export const addColumnBefore = toSvg(
  svg`<path pid="0" d="M19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm2.5 5.938a.937.937 0 1 0 0-1.875h-1.25a.312.312 0 0 1-.313-.313V16.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H16.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312v1.25a.937.937 0 1 0 1.875 0v-1.25c0-.173.14-.313.312-.313h1.25zM2 19a3 3 0 0 0 6 0V5a3 3 0 1 0-6 0v14zm-2 0V5a5 5 0 1 1 10 0v14a5 5 0 0 1-10 0z"></path>`
);

export const addColumnAfter = toSvg(
  svg`<path pid="0" d="M5 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm2.5 5.938a.937.937 0 1 0 0-1.875H6.25a.312.312 0 0 1-.313-.313V16.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H2.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312v1.25a.937.937 0 1 0 1.875 0v-1.25c0-.173.14-.313.312-.313H7.5zM16 19a3 3 0 0 0 6 0V5a3 3 0 0 0-6 0v14zm-2 0V5a5 5 0 0 1 10 0v14a5 5 0 0 1-10 0z"></path>`
);

export const deleteColumn = toSvg(
  svg`<path pid="0" d="M12.641 21.931a7.01 7.01 0 0 0 1.146 1.74A5 5 0 0 1 7 19V5a5 5 0 1 1 10 0v7.29a6.972 6.972 0 0 0-2 .965V5a3 3 0 0 0-6 0v14a3 3 0 0 0 3.641 2.931zM19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm-2.5 5.938h5a.937.937 0 1 0 0-1.875h-5a.937.937 0 1 0 0 1.875z"></path>`
);

export const addRowBefore = toSvg(
  svg`<path pid="0" d="M19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm2.5 5.938a.937.937 0 1 0 0-1.875h-1.25a.312.312 0 0 1-.313-.313V16.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H16.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312v1.25a.937.937 0 1 0 1.875 0v-1.25c0-.173.14-.313.312-.313h1.25zM5 2a3 3 0 1 0 0 6h14a3 3 0 0 0 0-6H5zm0-2h14a5 5 0 0 1 0 10H5A5 5 0 1 1 5 0z"></path>`
);

export const addRowAfter = toSvg(
  svg`<path pid="0" d="M19 0a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm2.5 5.938a.937.937 0 1 0 0-1.875h-1.25a.312.312 0 0 1-.313-.313V2.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H16.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312V7.5a.937.937 0 1 0 1.875 0V6.25c0-.173.14-.313.312-.313h1.25zM5 16a3 3 0 0 0 0 6h14a3 3 0 0 0 0-6H5zm0-2h14a5 5 0 0 1 0 10H5a5 5 0 0 1 0-10z"></path>`
);

export const deleteRow = toSvg(
  svg`<path pid="0" d="M13.255 15a6.972 6.972 0 0 0-.965 2H5A5 5 0 0 1 5 7h14a5 5 0 0 1 4.671 6.787 7.01 7.01 0 0 0-1.74-1.146A3 3 0 0 0 19 9H5a3 3 0 0 0 0 6h8.255zM19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm-2.5 5.938h5a.937.937 0 1 0 0-1.875h-5a.937.937 0 1 0 0 1.875z"></path>`
);

export const mergeCells = toSvg(
  svg``
);

export const splitCells = toSvg(
  svg``
);

export const toggleHeaderColumn = toSvg(
  svg`<path d="M 23.5625 0 c 1.3439 0 2.4375 1.0936 2.4375 2.4375 v 21.125 c 0 1.3439 -1.0936 2.4375 -2.4375 2.4375 H 2.4375 c -1.3439 0 -2.4375 -1.0936 -2.4375 -2.4375 V 2.4375 C 0 1.0936 1.0936 0 2.4375 0 h 21.125 Z m 0.8125 17.875 h -6.5 v 6.5 h 5.6875 c 0.4469 0 0.8125 -0.3656 0.8125 -0.8125 v -5.6875 Z m -8.125 0 H 9.75 v 6.5 h 6.5 v -6.5 Z m 8.125 -8.125 h -6.5 v 6.5 h 6.5 V 9.75 Z m -8.125 0 H 9.75 v 6.5 h 6.5 V 9.75 Z m 7.3125 -8.125 h -5.6875 v 6.5 h 6.5 V 2.4375 c 0 -0.4469 -0.3656 -0.8125 -0.8125 -0.8125 Z m -7.3125 0 H 9.75 v 6.5 h 6.5 V 1.625 Z" fill-rule="evenodd"/>`
);
  
export const toggleHeaderRow = toSvg(
  svg`<path d="M 23.5625 0 c 1.3439 0 2.4375 1.0936 2.4375 2.4375 v 21.125 c 0 1.3439 -1.0936 2.4375 -2.4375 2.4375 H 2.4375 c -1.3439 0 -2.4375 -1.0936 -2.4375 -2.4375 V 2.4375 C 0 1.0936 1.0936 0 2.4375 0 h 21.125 Z m -5.6875 16.25 h 6.5 V 9.75 h -6.5 v 6.5 Z m 6.5 7.3125 v -5.6875 h -6.5 v 6.5 h 5.6875 c 0.4469 0 0.8125 -0.3656 0.8125 -0.8125 Z M 9.75 16.25 h 6.5 V 9.75 H 9.75 v 6.5 Z m 0 8.125 h 6.5 v -6.5 H 9.75 v 6.5 Z m -8.125 -8.125 h 6.5 V 9.75 H 1.625 v 6.5 Z m 6.5 8.125 v -6.5 H 1.625 v 5.6875 c 0 0.4469 0.3656 0.8125 0.8125 0.8125 h 5.6875 Z" fill-rule="evenodd"/>`
);
    
export const toggleHeaderCell = toSvg(
  svg``
);

export const mergeOrSplit = toSvg(
  svg`<path pid="0" d="M2 19a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v14zm-2 0V5a5 5 0 0 1 5-5h14a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5zm12-9a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1zm0 6a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1zm0-13a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V4a1 1 0 0 1 1-1z"></path>`
);

export const setCellAttribute = toSvg(
  svg``
);

export const fixTables = toSvg(
  svg``
);

export const goToNextCell = toSvg(
  svg``
);
export const goToPreviousCell = toSvg(
  svg``
);

And table translations:

export const insertTable = "Insert a Table";
export const deleteTable = "Delete a Table";
export const addColumnBefore = "Add A Column Before";
export const addColumnAfter = "Add a Column After";
export const deleteColumn = "Delete a Column";
export const addRowBefore = "Add a Row Before";
export const addRowAfter = "Add a Row After";
export const deleteRow = "Delete a Row";
export const mergeCells = "Merge Cells";
export const splitCells = "Split Cells";
export const toggleHeaderColumn = "Toggle Header Column";
export const toggleHeaderRow = "Toggle Header Row";
export const toggleHeaderCell = "Toggle Header Cell";
export const mergeOrSplit = "Merge or Split Cells";
export const setCellAttribute = "Set Cell Attribute";
export const fixTables = "Fix Tables";
export const goToNextCell = "Go To Next Cell";
export const goToPreviousCell = "Go To Previous Cell";

And some custom styling:

rhino-editor table {
  border-collapse: collapse;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}
rhino-editor table td, rhino-editor table th {
  border: 2px solid #ced4da;
  box-sizing: border-box;
  min-width: 1em;
  padding: 3px 5px;
  position: relative;
  vertical-align: top;
}
rhino-editor table td > *, rhino-editor table th > * {
  margin-bottom: 0;
}
rhino-editor table th {
  background-color: #f1f3f5;
  font-weight: bold;
  text-align: left;
}
rhino-editor table .selectedCell:after {
  background: rgba(200, 200, 255, 0.4);
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
rhino-editor table .column-resize-handle {
  background-color: #adf;
  bottom: -2px;
  position: absolute;
  right: -2px;
  pointer-events: none;
  top: 0;
  width: 4px;
}
rhino-editor table p {
  margin: 0;
}
.tableWrapper {
  padding: 1rem 0;
  overflow-x: auto;
}

We then get things going by calling:

import "./custom-editor"
import Table from '@tiptap/extension-table'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
import TableRow from '@tiptap/extension-table-row'

function extendRhinoEditor (event) {
  const rhinoEditor = event.target
  if (rhinoEditor == null) return
  rhinoEditor.addExtensions(Table)
  rhinoEditor.addExtensions(TableRow)
  rhinoEditor.addExtensions(TableHeader)
  rhinoEditor.addExtensions(TableCell)
  rhinoEditor.rebuildEditor()
}

document.addEventListener("rhino-before-initialize", extendRhinoEditor)

It gives us an editor that looks like:

screenshot
@KonnorRogers
Copy link
Owner

KonnorRogers commented Sep 2, 2023 •
edited
Loading

@nathancolgate holy crap! You are awesome! I'm adding this to the docs first chance I get! thank you so much for sharing!!

minor suggestion btw:

function extendRhinoEditor (event) {
  const rhinoEditor = event.target
  if (rhinoEditor == null) return
  rhinoEditor.addExtensions(Table, TableRow, TableHeader, TableCell)
  // any time addExtensions is called, rebuildEditor should run.
}

everytime you call addExtensions it should be calling rebuildEditor so the editor is essentially loading N number of times for each extension. If it's not working, well then i have a bug fix to make 😆.

I should probably do a better job calling this out in the docs!

EDIT: I totally forgot Lit batches updates so rebuildEditor will actually only be called once. Carry on 🙈

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
@KonnorRogers's Rhino Editor Roadmap
Status: Ready
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nathancolgate @KonnorRogers