@difizen/libro-toc 0.0.2-alpha.0

package/src/module.ts

@@ -0,0 +1,58 @@
+import { MarkdownModule } from '@difizen/libro-markdown';
+import { LibroRenderMimeModule } from '@difizen/libro-rendermime';
+import { ManaModule } from '@difizen/mana-app';
+
+import { LibroCellTOCProvider } from './cell-toc-provider.js';
+import { LibroTocColorRegistry } from './libro-toc-color-registry.js';
+import { MarkDownCellTOCProvider } from './provider/markdown-toc-provider.js';
+import { OutputTOCProvider } from './provider/output-toc-provider.js';
+import { TOCCollapseService } from './toc-collapse-service.js';
+import { TOCSettingContribution } from './toc-configuration.js';
+import { LibroTocSlotContribution } from './toc-contribution.js';
+import { LibroTOCManager } from './toc-manager.js';
+import { CellTOCProviderContribution, TOCProviderOption } from './toc-protocol.js';
+import { LibroTOCProvider, LibroTOCProviderFactory } from './toc-provider.js';
+import { TOCView } from './toc-view.js';
+
+/**
+ * 不带output支持
+ */
+export const LibroBaseTOCModule = ManaModule.create()
+  .contribution(CellTOCProviderContribution)
+  .register(
+    TOCSettingContribution,
+    TOCView,
+    LibroTOCProvider,
+    {
+      token: LibroTOCProviderFactory,
+      useFactory: (ctx) => {
+        return (option) => {
+          const child = ctx.container.createChild();
+          child.register({
+            token: TOCProviderOption,
+            useValue: option,
+          });
+          return child.get(LibroTOCProvider);
+        };
+      },
+    },
+    LibroTOCManager,
+    LibroCellTOCProvider,
+    MarkDownCellTOCProvider,
+    TOCCollapseService,
+    LibroTocColorRegistry,
+  )
+  .dependOn(MarkdownModule);
+/**
+ * 标准的notebook TOC
+ */
+export const LibroTOCModule = ManaModule.create()
+  .register(OutputTOCProvider)
+  .dependOn(LibroBaseTOCModule, LibroRenderMimeModule);
+
+/**
+ * toc在内容区右侧
+ */
+export const LibroTOCOnContentModule = ManaModule.create().register(
+  LibroTocSlotContribution,
+);

package/src/provider/html.ts

@@ -0,0 +1,61 @@
+import type { IHeading } from '../toc-protocol.js';
+import { HeadingType } from '../toc-protocol.js';
+
+/**
+ * HTML heading
+ */
+export interface IHTMLHeading extends IHeading {
+  /**
+   * HTML id
+   */
+  id?: string | null;
+}
+/**
+ * Parse a HTML string for headings.
+ *
+ * ### Notes
+ * The html string is not sanitized - use with caution
+ *
+ * @param html HTML string to parse
+ * @param force Whether to ignore HTML headings with class jp-toc-ignore and tocSkip or not
+ * @returns Extracted headings
+ */
+export function getHTMLHeadings(html: string, type?: HeadingType): IHTMLHeading[] {
+  const container: HTMLDivElement = document.createElement('div');
+  container.innerHTML = html;
+
+  const headings = new Array<IHTMLHeading>();
+  const headers = Array.from(container.querySelectorAll('h1, h2, h3, h4, h5, h6'));
+  for (const h of headers) {
+    const level = parseInt(h.tagName[1], 10);
+
+    headings.push({
+      text: h.textContent ?? '',
+      level,
+      id: h?.getAttribute('id'),
+      skip: h.classList.contains('jp-toc-ignore') || h.classList.contains('tocSkip'),
+      type: type ?? HeadingType.HTML,
+    });
+  }
+  return headings;
+}
+
+export const HTMLMimeType = 'text/html';
+
+/**
+ * Returns whether a MIME type corresponds to either HTML.
+ *
+ * @param mime - MIME type string
+ * @returns boolean indicating whether a provided MIME type corresponds to either HTML
+ *
+ * @example
+ * const bool = isHTML('text/html');
+ * // returns true
+ *
+ * @example
+ * const bool = isHTML('text/plain');
+ * // returns false
+ */
+export function isHTML(mime: string): boolean {
+  return mime === HTMLMimeType;
+}

package/src/provider/markdown-toc-provider.ts

@@ -0,0 +1,34 @@
+import { LibroMarkdownCellModel } from '@difizen/libro-core';
+import type { CellView } from '@difizen/libro-core';
+import { MarkdownParser } from '@difizen/libro-markdown';
+import { inject, singleton, watch } from '@difizen/mana-app';
+
+import type { CellTOCProvider } from '../toc-protocol.js';
+import { HeadingType, CellTOCProviderContribution } from '../toc-protocol.js';
+
+import { getHTMLHeadings } from './html.js';
+
+@singleton({ contrib: [CellTOCProviderContribution] })
+export class MarkDownCellTOCProvider implements CellTOCProviderContribution {
+  protected readonly markdownParser: MarkdownParser;
+  constructor(@inject(MarkdownParser) markdownParser: MarkdownParser) {
+    this.markdownParser = markdownParser;
+  }
+
+  canHandle(cell: CellView) {
+    return LibroMarkdownCellModel.is(cell.model) ? 100 : 0;
+  }
+  factory(cell: CellView): CellTOCProvider {
+    return {
+      getHeadings: () => {
+        return getHTMLHeadings(
+          this.markdownParser.render(cell.model.value, { cellId: cell.model.id }),
+          HeadingType.Markdown,
+        );
+      },
+      updateWatcher: (update) => {
+        return watch(cell.model, 'value', update);
+      },
+    };
+  }
+}

package/src/provider/markdown.ts

@@ -0,0 +1,182 @@
+import type { IHeading } from '../toc-protocol.js';
+import { HeadingType } from '../toc-protocol.js';
+
+interface IHeader {
+  /**
+   * Heading text.
+   */
+  text: string;
+
+  /**
+   * Heading level.
+   */
+  level: number;
+
+  /**
+   * Raw string containing the heading
+   */
+  raw: string;
+
+  /**
+   * Whether the heading is marked to skip or not
+   */
+  skip: boolean;
+}
+
+/**
+ * Markdown heading
+ */
+export interface IMarkdownHeading extends IHeading {
+  /**
+   * Heading line
+   */
+  line: number;
+}
+
+/**
+ * Parses the provided string and returns a list of headings.
+ *
+ * @param text - Input text
+ * @returns List of headings
+ */
+export function getHeadings(text: string): IMarkdownHeading[] {
+  // Split the text into lines:
+  const lines = text.split('\n');
+
+  // Iterate over the lines to get the header level and text for each line:
+  const headings = new Array<IMarkdownHeading>();
+  let isCodeBlock;
+  let lineIdx = 0;
+
+  // Don't check for Markdown headings if in a YAML frontmatter block.
+  // We can only start a frontmatter block on the first line of the file.
+  // At other positions in a markdown file, '---' represents a horizontal rule.
+  if (lines[lineIdx] === '---') {
+    // Search for another '---' and treat that as the end of the frontmatter.
+    // If we don't find one, treat the file as containing no frontmatter.
+    for (
+      let frontmatterEndLineIdx = lineIdx + 1;
+      frontmatterEndLineIdx < lines.length;
+      frontmatterEndLineIdx++
+    ) {
+      if (lines[frontmatterEndLineIdx] === '---') {
+        lineIdx = frontmatterEndLineIdx + 1;
+        break;
+      }
+    }
+  }
+
+  for (; lineIdx < lines.length; lineIdx++) {
+    const line = lines[lineIdx];
+
+    if (line === '') {
+      // Bail early
+      continue;
+    }
+
+    // Don't check for Markdown headings if in a code block
+    if (line.startsWith('```')) {
+      isCodeBlock = !isCodeBlock;
+    }
+    if (isCodeBlock) {
+      continue;
+    }
+
+    const heading = parseHeading(line, lines[lineIdx + 1]); // append the next line to capture alternative style Markdown headings
+
+    if (heading) {
+      headings.push({
+        ...heading,
+        line: lineIdx,
+        type: HeadingType.Markdown,
+      });
+    }
+  }
+  return headings;
+}
+
+/**
+ * Whether a MIME type corresponds to a Markdown flavor.
+ */
+export function isMarkdown(mime: string): boolean {
+  return [
+    'text/x-ipythongfm',
+    'text/x-markdown',
+    'text/x-gfm',
+    'text/markdown',
+  ].includes(mime);
+}
+
+/**
+ * Ignore title with html tag with a class name equal to `jp-toc-ignore` or `tocSkip`
+ */
+const skipHeading =
+  /<\w+\s(.*?\s)?class="(.*?\s)?(jp-toc-ignore|tocSkip)(\s.*?)?"(\s.*?)?>/;
+
+/**
+ * Parses a heading, if one exists, from a provided string.
+ * @param line - Line to parse
+ * @param nextLine - The line after the one to parse
+ * @returns heading info
+ *
+ * @example
+ * ### Foo
+ * const out = parseHeading('### Foo\n');
+ * // returns {'text': 'Foo', 'level': 3}
+ *
+ * @example
+ * const out = parseHeading('Foo\n===\n');
+ * // returns {'text': 'Foo', 'level': 1}
+ *
+ * @example
+ * <h4>Foo</h4>
+ * const out = parseHeading('<h4>Foo</h4>\n');
+ * // returns {'text': 'Foo', 'level': 4}
+ *
+ * @example
+ * const out = parseHeading('Foo');
+ * // returns null
+ */
+function parseHeading(line: string, nextLine?: string): IHeader | null {
+  // Case: Markdown heading
+  let match = line.match(/^([#]{1,6}) (.*)/);
+  if (match) {
+    return {
+      text: cleanTitle(match[2]),
+      level: match[1].length,
+      raw: line,
+      skip: skipHeading.test(match[0]),
+    };
+  }
+  // Case: Markdown heading (alternative style)
+  if (nextLine) {
+    match = nextLine.match(/^ {0,3}([=]{2,}|[-]{2,})\s*$/);
+    if (match) {
+      return {
+        text: cleanTitle(line),
+        level: match[1][0] === '=' ? 1 : 2,
+        raw: [line, nextLine].join('\n'),
+        skip: skipHeading.test(line),
+      };
+    }
+  }
+  // Case: HTML heading (WARNING: this is not particularly robust, as HTML headings can span multiple lines)
+  match = line.match(/<h([1-6]).*>(.*)<\/h\1>/i);
+  if (match) {
+    return {
+      text: match[2],
+      level: parseInt(match[1], 10),
+      skip: skipHeading.test(match[0]),
+      raw: line,
+    };
+  }
+
+  return null;
+}
+
+function cleanTitle(heading: string): string {
+  // take special care to parse Markdown links into raw text
+  return heading.replace(/\[(.+)\]\(.+\)/g, '$1');
+}
+
+export const MarkdownMimeType = 'text/markdown';

package/src/provider/output-toc-provider.ts

@@ -0,0 +1,53 @@
+import type { MultilineString } from '@difizen/libro-common';
+import { concatMultilineString } from '@difizen/libro-common';
+import type { CellView } from '@difizen/libro-core';
+import { ExecutableCellView } from '@difizen/libro-core';
+import { RenderMimeRegistry } from '@difizen/libro-rendermime';
+import { inject, singleton } from '@difizen/mana-app';
+import { watch } from '@difizen/mana-app';
+
+import type { CellTOCProvider } from '../toc-protocol.js';
+import { CellTOCProviderContribution } from '../toc-protocol.js';
+
+import { getHTMLHeadings } from './html.js';
+import { isMarkdown, MarkdownMimeType } from './markdown.js';
+
+@singleton({ contrib: [CellTOCProviderContribution] })
+export class OutputTOCProvider implements CellTOCProviderContribution {
+  @inject(RenderMimeRegistry) renderMimeRegistry: RenderMimeRegistry;
+  canHandle(cell: CellView) {
+    return ExecutableCellView.is(cell) ? 100 : 0;
+  }
+
+  factory(cell: CellView): CellTOCProvider {
+    if (!ExecutableCellView.is(cell)) {
+      throw new Error('expected EditorCellView');
+    }
+
+    return {
+      getHeadings: () => {
+        return cell.outputArea.outputs
+          .filter((item) => {
+            const defaultRenderMimeType =
+              this.renderMimeRegistry.preferredMimeType(item);
+            if (!defaultRenderMimeType) {
+              return false;
+            }
+            return isMarkdown(defaultRenderMimeType);
+          })
+          .map((item) => {
+            const html = this.renderMimeRegistry.markdownParser?.render(
+              concatMultilineString(item.data[MarkdownMimeType] as MultilineString),
+              { cellId: cell.model.id },
+            );
+            const head = getHTMLHeadings(html ?? '');
+            return head;
+          })
+          .flat();
+      },
+      updateWatcher: (update) => {
+        return watch(cell.outputArea, 'outputs', update);
+      },
+    };
+  }
+}

package/src/toc-collapse-service.ts

@@ -0,0 +1,96 @@
+import type { CellView } from '@difizen/libro-core';
+import {
+  CellCollapsible,
+  DefaultCollapseService,
+  CollapseService,
+} from '@difizen/libro-core';
+import { prop } from '@difizen/mana-app';
+import { inject, transient } from '@difizen/mana-app';
+
+import { LibroTOCManager } from './toc-manager.js';
+import { HeadingType } from './toc-protocol.js';
+
+@transient({ token: CollapseService })
+export class TOCCollapseService extends DefaultCollapseService {
+  @inject(LibroTOCManager) libroTOCManager: LibroTOCManager;
+
+  @prop()
+  override collapserVisible = true;
+
+  override setHeadingCollapse(cell: CellView, collapsing: boolean) {
+    if (!CellCollapsible.is(cell)) {
+      return;
+    }
+    cell.headingCollapsed = collapsing;
+    const currentIndex = this.view.model.cells.findIndex(
+      (item) => item.model.id === cell.model.id,
+    );
+
+    if (currentIndex < 0) {
+      return;
+    }
+
+    const childNumber = this.getCollapsibleChildNumber(cell);
+    cell.collapsibleChildNumber = childNumber;
+
+    const childCells = this.view.model.cells.filter(
+      (_item, index) => index > currentIndex && index <= currentIndex + childNumber,
+    );
+    if (collapsing === true) {
+      childCells.forEach((item) => {
+        item.collapsedHidden = collapsing;
+      });
+    } else {
+      let i = 0;
+      while (i < childNumber) {
+        const element = childCells[i];
+        element.collapsedHidden = false;
+        /**
+         * 展开时子项的折叠不需要展开
+         */
+        if (CellCollapsible.is(element) && element.headingCollapsed) {
+          i = i + element.collapsibleChildNumber + 1;
+        } else {
+          i = i + 1;
+        }
+      }
+    }
+  }
+
+  override getCollapsibleChildNumber(cell: CellView) {
+    const providerList = this.libroTOCManager
+      .getTOCProvider(this.view)
+      .getCellTocProviderList();
+    const withMaxLevel = providerList
+      .map((item) => {
+        let maxLevel = 100;
+        if (item.tocProvider) {
+          // 最大的标题是level最小的
+          const headings = item.tocProvider
+            ?.getHeadings()
+            .filter((heading) => heading.type === HeadingType.Markdown);
+
+          if (headings.length > 0) {
+            maxLevel = Math.min(...headings.map((heading) => heading.level));
+          }
+        }
+        return { ...item, maxLevel };
+      })
+      .map((item, index, array) => {
+        let childNumber = 0;
+        for (let i = index + 1; i < array.length; i++) {
+          const element = array[i];
+          if (item.maxLevel < element.maxLevel) {
+            childNumber = childNumber + 1;
+          } else {
+            break;
+          }
+        }
+        return { ...item, childNumber };
+      });
+
+    const number =
+      withMaxLevel.find((item) => item.cellId === cell.model.id)?.childNumber ?? 0;
+    return number;
+  }
+}

package/src/toc-configuration.ts

@@ -0,0 +1,22 @@
+import { ConfigurationContribution } from '@difizen/mana-app';
+import type { ConfigurationNode } from '@difizen/mana-app';
+import { singleton } from '@difizen/mana-app';
+import { l10n } from '@difizen/mana-l10n';
+
+export const TOCVisible: ConfigurationNode<boolean> = {
+  id: 'libro.toc.visible',
+  description: l10n.t('是否显示侧边的TOC'),
+  title: 'TOC',
+  type: 'checkbox',
+  defaultValue: true,
+  schema: {
+    type: 'boolean',
+  },
+};
+
+@singleton({ contrib: ConfigurationContribution })
+export class TOCSettingContribution implements ConfigurationContribution {
+  registerConfigurations() {
+    return [TOCVisible];
+  }
+}

package/src/toc-contribution.ts

@@ -0,0 +1,34 @@
+import type {
+  LibroView,
+  LibroExtensionSlotFactory,
+  LibroSlot,
+} from '@difizen/libro-core';
+import { LibroExtensionSlotContribution } from '@difizen/libro-core';
+import { ViewManager } from '@difizen/mana-app';
+import { inject, singleton } from '@difizen/mana-app';
+
+import { TOCView } from './toc-view.js';
+
+@singleton({ contrib: [LibroExtensionSlotContribution] })
+export class LibroTocSlotContribution implements LibroExtensionSlotContribution {
+  @inject(ViewManager) viewManager: ViewManager;
+  protected viewMap: Map<string, TOCView> = new Map();
+
+  public readonly slot: LibroSlot = 'right';
+
+  factory: LibroExtensionSlotFactory = async (libro: LibroView) => {
+    const view = await this.viewManager.getOrCreateView(TOCView, {
+      parentId: libro.id,
+    });
+    view.parent = libro;
+    this.viewMap.set(libro.id, view);
+    view.onDisposed(() => {
+      this.viewMap.delete(libro.id);
+    });
+    return view;
+  };
+  // viewOpenOption = {
+  // reveal: true,
+  // order: 'a',
+  // };
+}

package/src/toc-manager.ts

@@ -0,0 +1,27 @@
+import type { LibroView } from '@difizen/libro-core';
+import { inject, singleton } from '@difizen/mana-app';
+
+import type { LibroTOCProvider } from './toc-provider.js';
+import { LibroTOCProviderFactory } from './toc-provider.js';
+
+@singleton()
+export class LibroTOCManager {
+  protected tocProviderMap = new Map<LibroView, LibroTOCProvider>();
+  protected libroTOCProviderFactory: LibroTOCProviderFactory;
+
+  constructor(
+    @inject(LibroTOCProviderFactory) libroTOCProviderFactory: LibroTOCProviderFactory,
+  ) {
+    this.libroTOCProviderFactory = libroTOCProviderFactory;
+  }
+
+  getTOCProvider(view: LibroView): LibroTOCProvider {
+    let provider = this.tocProviderMap.get(view);
+    if (provider) {
+      return provider;
+    }
+    provider = this.libroTOCProviderFactory({ view });
+    this.tocProviderMap.set(view, provider);
+    return provider;
+  }
+}

package/src/toc-protocol.ts

@@ -0,0 +1,130 @@
+import type { CellView } from '@difizen/libro-core';
+import type { View } from '@difizen/mana-app';
+import type { Disposable } from '@difizen/mana-app';
+import { Syringe } from '@difizen/mana-app';
+
+/**
+ * Table of Contents configuration
+ *
+ * #### Notes
+ * A document model may ignore some of those options.
+ */
+export interface TOCOptions {
+  /**
+   * Base level for the highest headings
+   */
+  baseNumbering: number;
+  /**
+   * Maximal depth of headings to display
+   */
+  maximalDepth: number;
+  /**
+   * Whether to number first-level headings or not.
+   */
+  numberingH1: boolean;
+  /**
+   * Whether to number headings in document or not.
+   */
+  numberHeaders: boolean;
+  /**
+   * Whether to include cell outputs in headings or not.
+   */
+  includeOutput: boolean;
+  /**
+   * Whether to synchronize heading collapse state between the ToC and the document or not.
+   */
+  syncCollapseState: boolean;
+}
+
+/**
+ * Default table of content configuration
+ */
+export const defaultConfig: TOCOptions = {
+  baseNumbering: 1,
+  maximalDepth: 4,
+  numberingH1: true,
+  numberHeaders: false,
+  includeOutput: true,
+  syncCollapseState: false,
+};
+
+/**
+ * Interface describing a heading.
+ */
+export interface IHeading {
+  /**
+   * Type of heading
+   */
+  type: HeadingType;
+
+  /**
+   * Heading text.
+   */
+  text: string;
+
+  /**
+   * HTML heading level.
+   */
+  level: number;
+
+  /**
+   * Heading prefix.
+   */
+  prefix?: string | null;
+
+  /**
+   * Dataset to add to the item node
+   */
+  dataset?: Record<string, string>;
+
+  /**
+   * Whether the heading is marked to skip or not
+   */
+  skip?: boolean;
+
+  /**
+   * Index of the output containing the heading
+   */
+  outputIndex?: number;
+
+  /**
+   * HTML id
+   */
+  id?: string | null;
+}
+
+/**
+ * Type of headings
+ */
+export enum HeadingType {
+  /**
+   * Heading from HTML output
+   */
+  HTML,
+  /**
+   * Heading from Markdown cell or Markdown output
+   */
+  Markdown,
+}
+
+export interface CellTOCProvider {
+  getHeadings: () => IHeading[];
+  updateWatcher: (fn: () => void) => Disposable;
+}
+
+export interface CellTOCProviderContribution {
+  canHandle: (cell: CellView) => number;
+  factory: (cell: CellView) => CellTOCProvider;
+}
+
+export const CellTOCProviderContribution = Syringe.defineToken(
+  'CellTOCProviderContribution',
+);
+
+export interface TOCProviderOption {
+  /**
+   * libro view
+   */
+  view: View;
+}
+export const TOCProviderOption = Symbol('TOCProviderOption');