obsidian#editorViewField TypeScript Examples

isLivePreview = (state: EditorState) => {
    if (requireApiVersion && requireApiVersion("0.13.23")) {
        return state.field(editorLivePreviewField);
    } else {
        const md = state.field(editorViewField);
        const { state: viewState } = md.leaf.getViewState() ?? {};

        return (
            viewState && viewState.mode == "source" && viewState.source == false
        );
    }
}

export function buildCMViewPlugin(app: App, _settings: SuperchargedLinksSettings)
{
    // Implements the live preview supercharging
    // Code structure based on https://github.com/nothingislost/obsidian-cm6-attributes/blob/743d71b0aa616407149a0b6ea5ffea28e2154158/src/main.ts
    // Code help credits to @NothingIsLost! They have been a great help getting this to work properly.
    class HeaderWidget extends WidgetType {
        attributes: Record<string, string>
        after: boolean

        constructor(attributes: Record<string, string>, after: boolean) {
            super();
            this.attributes = attributes
            this.after = after
        }

        toDOM() {
            let headerEl = document.createElement("span");
            headerEl.setAttrs(this.attributes);
            if (this.after) {
                headerEl.addClass('data-link-icon-after');
            }
            else {
                headerEl.addClass('data-link-icon')
            }
            // create a naive bread crumb
            return headerEl;
        }

        ignoreEvent() {
            return true;
        }
    }

    const settings = _settings;
    const viewPlugin = ViewPlugin.fromClass(
        class {
            decorations: DecorationSet;

            constructor(view: EditorView) {
                this.decorations = this.buildDecorations(view);
            }

            update(update: ViewUpdate) {
                if (update.docChanged || update.viewportChanged) {
                    this.decorations = this.buildDecorations(update.view);
                }
            }

            destroy() {
            }

            buildDecorations(view: EditorView) {
                let builder = new RangeSetBuilder<Decoration>();
                if (!settings.enableEditor) {
                    return builder.finish();
                }
                const mdView = view.state.field(editorViewField) as MarkdownView;
                let lastAttributes = {};
                let iconDecoAfter: Decoration = null;
                let iconDecoAfterWhere: number = null;

                let mdAliasFrom: number = null;
                let mdAliasTo: number = null;
                for (let {from, to} of view.visibleRanges) {
                    syntaxTree(view.state).iterate({
                        from,
                        to,
                        enter: (type, from, to) => {


                            const tokenProps = type.prop(tokenClassNodeProp);
                            if (tokenProps) {
                                const props = new Set(tokenProps.split(" "));
                                const isLink = props.has("hmd-internal-link");
                                const isAlias = props.has("link-alias");
                                const isPipe = props.has("link-alias-pipe");

                                // The 'alias' of the md link
                                const isMDLink = props.has('link');
                                // The 'internal link' of the md link
                                const isMDUrl = props.has('url');
                                const isMDFormatting = props.has('formatting-link');

                                if (isMDLink && !isMDFormatting) {
                                    // Link: The 'alias'
                                    // URL: The internal link
                                    mdAliasFrom = from;
                                    mdAliasTo = to;
                                }

                                if (!isPipe && !isAlias) {
                                    if (iconDecoAfter) {
                                        builder.add(iconDecoAfterWhere, iconDecoAfterWhere, iconDecoAfter);
                                        iconDecoAfter = null;
                                        iconDecoAfterWhere = null;
                                    }
                                }
                                if (isLink && !isAlias && !isPipe || isMDUrl) {
                                    let linkText = view.state.doc.sliceString(from, to);
                                    linkText = linkText.split("#")[0];
                                    let file = app.metadataCache.getFirstLinkpathDest(linkText, mdView.file.basename);
                                    if (isMDUrl && !file) {
                                        try {
                                            file = app.vault.getAbstractFileByPath(decodeURIComponent(linkText)) as TFile;
                                        }
                                        catch(e) {}
                                    }
                                    if (file) {
                                        let _attributes = fetchTargetAttributesSync(app, settings, file, true);
                                        let attributes: Record<string, string> = {};
                                        for (let key in _attributes) {
                                            attributes["data-link-" + key] = _attributes[key];
                                        }
                                        let deco = Decoration.mark({
                                            attributes,
                                            class: "data-link-text"
                                        });
                                        let iconDecoBefore = Decoration.widget({
                                            widget: new HeaderWidget(attributes, false),
                                        });
                                        iconDecoAfter = Decoration.widget({
                                            widget: new HeaderWidget(attributes, true),
                                        });

                                        if (isMDUrl) {
                                            // Apply retroactively to the alias found before
                                            let deco = Decoration.mark({
                                                attributes: attributes,
                                                class: "data-link-text"
                                            });
                                            builder.add(mdAliasFrom, mdAliasFrom, iconDecoBefore);
                                            builder.add(mdAliasFrom, mdAliasTo, deco);
                                            if (iconDecoAfter) {
                                                builder.add(mdAliasTo, mdAliasTo, iconDecoAfter);
                                                iconDecoAfter = null;
                                                iconDecoAfterWhere = null;
                                                mdAliasFrom = null;
                                                mdAliasTo = null;
                                            }
                                        }
                                        else {
                                            builder.add(from, from, iconDecoBefore);
                                        }

                                        builder.add(from, to, deco);
                                        lastAttributes = attributes;
                                        iconDecoAfterWhere = to;
                                    }
                                } else if (isLink && isAlias) {
                                    let deco = Decoration.mark({
                                        attributes: lastAttributes,
                                        class: "data-link-text"
                                    });
                                    builder.add(from, to, deco);
                                    if (iconDecoAfter) {
                                        builder.add(to, to, iconDecoAfter);
                                        iconDecoAfter = null;
                                        iconDecoAfterWhere = null;
                                    }
                                }
                            }
                        }
                    })

                }
                return builder.finish();
            }
        },
        {
            decorations: v => v.decorations
        }
    );
    return viewPlugin;
}

getViewPlugin = (plugin: BannersPlugin) => ViewPlugin.fromClass(class BannerPV implements PluginValue {
  decor: DecorationSet;

  constructor(view: EditorView) {
    this.decor = this.decorate(view.state);
  }

  update(_update: ViewUpdate) {
    const { docChanged, view, state, startState } = _update;
    if (docChanged || state.facet(bannerDecorFacet) !== startState.facet(bannerDecorFacet) || state.facet(iconDecorFacet) !== startState.facet(iconDecorFacet)) {
      this.decor = this.decorate(view.state);
    }
  }

  decorate(state: EditorState): DecorationSet {
    // If there's no YAML, stop here
    const cursor =  syntaxTree(state).cursor();
    cursor.firstChild();
    if (cursor.name !== YAML_SEPARATOR_TOKEN) { return Decoration.none }

    // Get all frontmatter fields to later process
    const frontmatter: {[key: string]: string} = {};
    let key;
    while (cursor.nextSibling() && cursor.name !== YAML_SEPARATOR_TOKEN) {
      const { from, to, name } = cursor;
      if (name === YAML_DEF_NAME_TOKEN) {
        key = state.sliceDoc(from, to);
      } else if (YAML_DEF_VAL_TOKENS.includes(name) && !frontmatter[key]) {
        const isStr = name === YAML_DEF_STR_TOKEN;
        const val = state.sliceDoc(from + (isStr ? 1 : 0), to - (isStr ? 1 : 0));
        frontmatter[key] = val;
      }
    };

    const bannerData = plugin.metaManager.getBannerData(frontmatter);
    const { src, icon } = bannerData;
    const { contentEl, file } = state.field(editorViewField);
    const widgets: Decoration[] = [];

    // Add banner widgets if applicable
    if (src) {
      const settingsFacet = state.facet(bannerDecorFacet);
      widgets.push(
        Decoration.widget({ widget: new BannerWidget(plugin, bannerData, file.path, contentEl, settingsFacet) }),
        Decoration.widget({ widget: new SpacerWidget() }),
        Decoration.line({ class: 'has-banner' })
      );
    }

    // Add icon widget if applicable
    if (icon) {
      const settingsFacet = state.facet(iconDecorFacet);
      widgets.push(
        Decoration.widget({ widget: new IconWidget(plugin, icon, file, settingsFacet) }),
        Decoration.line({ class: "has-banner-icon", attributes: { "data-icon-v": settingsFacet.iconVerticalAlignment }})
      );
    }

    return Decoration.set(widgets.map(w => w.range(0)), true);
  }
}, {
  decorations: v => v.decor
})