feat: display toc as inline block

fnumatic · Feb 7, 2024 · 678401f · 678401f
1 parent bcf9952
commit 678401f
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 4 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -11,10 +11,11 @@ export const DEFAULT_SETTINGS: DynamicTOCSettings = {
   externalStyle: "None",
   supportAllMatchers: false,
   allow_inconsistent_headings: false,
-  embeddedHeadings : true
+  embeddedHeadings: true,
 };
 
 export const TABLE_CLASS_NAME = "dynamic-toc";
+export const TABLE_CLASS_NAME_INLINE = "dynamic-toc-inline";
 export const TABLE_CLASS_SELECTOR = `.${TABLE_CLASS_NAME}`;
 
 export const ALL_MATCHERS = Object.keys(

diff --git a/src/main.ts b/src/main.ts
@@ -1,12 +1,14 @@
 import { Editor, MarkdownPostProcessorContext, Plugin } from "obsidian";
-import { parseConfig } from "./utils/config";
+import { mergeSettings, parseConfig } from "./utils/config";
 import { ALL_MATCHERS, DEFAULT_SETTINGS } from "./constants";
 import { CodeBlockRenderer } from "./renderers/code-block-renderer";
 import { DynamicTOCSettingsTab } from "./settings-tab";
 import {
   DynamicTOCSettings,
   ExternalMarkdownKey,
   EXTERNAL_MARKDOWN_PREVIEW_STYLE,
+  TableOptions,
+  INLINE_TOC_MATCHER,
 } from "./types";
 import { DynamicInjectionRenderer } from "./renderers/dynamic-injection-renderer";
 import { InsertCommandModal } from "./insert-command.modal";
@@ -40,6 +42,15 @@ export default class DynamicTOCPlugin extends Plugin {
 
     this.registerMarkdownPostProcessor(
       (el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
+        const codeblocks = el.findAll("code");
+        const options = mergeSettings({ style: "inline" , displayInline: true } as TableOptions, this.settings);
+
+        for (let codeblock of codeblocks) {
+          if (codeblock.innerText.trim() != INLINE_TOC_MATCHER) continue
+          ctx.addChild(
+            new CodeBlockRenderer(this.app, options, ctx.sourcePath, codeblock)
+          );
+        }
         const matchers =
           this.settings.supportAllMatchers === true
             ? ALL_MATCHERS

diff --git a/src/renderers/code-block-renderer.ts b/src/renderers/code-block-renderer.ts
@@ -8,7 +8,7 @@ import {
 import { mergeSettings } from "../utils/config";
 import { extractHeadings, embeddedHeadings, mergeHeadings } from "../utils/extract-headings";
 import { DynamicTOCSettings, TableOptions } from "../types";
-import { TABLE_CLASS_NAME } from "src/constants";
+import { TABLE_CLASS_NAME, TABLE_CLASS_NAME_INLINE } from "src/constants";
 
 export class CodeBlockRenderer extends MarkdownRenderChild {
   constructor(
@@ -56,8 +56,11 @@ export class CodeBlockRenderer extends MarkdownRenderChild {
 
   async render(configOverride?: TableOptions) {
     const settings= configOverride || this.config
+    const cls= settings.displayInline ? TABLE_CLASS_NAME_INLINE : null
     this.container.empty();
-    this.container.classList.add(TABLE_CLASS_NAME);
+    this.container = this.container.createSpan();
+    this.container.classList.add(TABLE_CLASS_NAME,cls);
+
     const fileMetaData = this.app.metadataCache.getCache(this.filePath)
     const { headings, embeds } = fileMetaData;
     const embbedHeadings = embeddedHeadings(this.app.metadataCache, embeds)

diff --git a/src/styles.css b/src/styles.css
@@ -22,3 +22,7 @@
 .is-live-preview .dynamic-toc ol {
     white-space: normal;
 }
+
+.dynamic-toc-inline > p{
+    display: inline;
+}
diff --git a/src/types.ts b/src/types.ts
@@ -8,6 +8,7 @@ export interface TableOptions {
   delimiter?: string;
   varied_style?: boolean;
   embeddedHeadings: boolean;
+  displayInline?: boolean;
 }
 
 export const EXTERNAL_MARKDOWN_PREVIEW_STYLE = {
@@ -19,6 +20,8 @@ export const EXTERNAL_MARKDOWN_PREVIEW_STYLE = {
   TheBrain: "[/toc/]",
 };
 
+export const INLINE_TOC_MATCHER = "toc@@inline";
+
 export type ExternalMarkdownKey = keyof typeof EXTERNAL_MARKDOWN_PREVIEW_STYLE;
 export interface DynamicTOCSettings extends TableOptions {
   externalStyle: ExternalMarkdownKey;