README

Prgfx.Neos.MarkdownView

composer require prgfx/neos-markdown-view

提供渲染Markdown文本的查看器，例如用于渲染静态帮助文本。

选项

ui:
  inspector:
    views:
      helpText:
        group: helpText
        view: Prgfx.Neos.MarkdownView/MarkdownView
        viewOptions:
          content: |
            **Markdown goes here**
          # optional css class for the element in case you want to add custom styling
          # (include stylesheets in the Neos.Neos.Ui.resources.stylesheets setting)
          className: '...'
          # see react-markdown options
          # tag names of elements that may get converted, defaults to all
          allowedElements: []
          # tag names of elements that should not be converted
          disallowedElements: []

注意

换行符

该脚本将内容末尾的\\替换为连续的双空格，因此如果从yaml中移除尾部空格，则换行符将正常工作。

ClientEval

ClientEval：已实现（翻译）内容。您可以在上下文中使用node、parentNode和documentNode。

此外，此插件还提供了一些帮助器以与ClientEval上下文交互，以与guest-frame交互。

异步内容

如果ClientEval返回Promise，则解析的值将作为内容加载。

高级示例

显示翻译状态

将翻译状态渲染到您的页面上

prototype(Neos.Neos:Page) {
    bodyTag.attributes {
        data-translations = Neos.Fusion:Loop {
            @glue = '\\n'
            items = Neos.Neos:DimensionsMenuItems
            itemRenderer = ${'- ' + (item.node ? '✅' : '❌') + ' ' + item.targetDimensions.language.label}
            @if.inBackend = ${documentNode.context.inBackend}
        }
    }
}

配置小部件

Neos.Neos.Document:
  ui:
    inspector:
      groups:
        dimensions:
          label: Dimensions
          icon: language
      views:
        helpText:
          group: dimensions
          label: Translations of this page
          view: Prgfx.Neos.MarkdownView/MarkdownView
          viewOptions:
            content: ClientEval:waitFor(() => document.querySelector('iframe').contentDocument?.body?.dataset.availableDimensions?.replaceAll('\\n','\n'))

显示缺失的标题级别

创建外部脚本以保持节点配置正常

const getHeadings = (waitFor, htmlElement) => {
    return waitFor(htmlElement('body script')).then(() => {
        const iframe = document.querySelector('iframe');
        const headings = [...iframe.contentDocument.querySelectorAll('h1,h2,h3,h4,h5,h6')];
        return headings.reduce(({ md, last }, node) => {
            const level = Number.parseInt(node.tagName.substring(1));
            // skipped heading level?
            const status = level > last && level - last > 1 ? '⚠' : ' ';
            md += `- ${level}${status} ${(node.textContent)}\n`;
            return { md, last: level }
        }, { md: '', last: 0 }).md;
    })
};
// make helper globally available
window['markdownWidget_example_headings'] = getHeadings;

在Settings.yaml中加载JS文件

Neos:
  Neos:
    Ui:
      resources:
        javascript:
          'My.Example':
            resource: resource://My.Example/Public/missing-headings.js

在节点类型中配置视图

Neos.Neos:Document:
  ui:
    inspector:
      views:
        headings:
          group: document
          label: Missing heading levels
          view: Prgfx.Neos.MarkdownView/MarkdownView
          viewOptions:
            # we pass the context variables to the function exposed from our script
            content: ClientEval:window['markdownWidget_example_headings']?.(waitFor, htmlElement)

prgfx / neos-markdown-view

维护者

详细信息