am-editor11212/plugins/heading

@aomao/plugin-heading

标题样式插件

安装

$ yarn add @aomao/plugin-heading

添加到引擎

import Engine, { EngineInterface } from '@aomao/engine';
import Heading from '@aomao/plugin-heading';

new Engine(...,{ plugins:[Heading] })

可选项

锚点

开启后在标题左边出现可复制锚点按钮

showAnchor?: boolean;

当点击复制锚点的时候触发，传入当前标题的 id 值，返回的内容将写入到用户的粘贴板上，默认将返回当前 url+id

anchorCopy?:(id:string) => string

快捷键

//快捷键
hotkey?: {
    h1?: string;//标题1，默认 mod+opt+1
    h2?: string;//标题2，默认 mod+opt+2
    h3?: string;//标题3，默认 mod+opt+3
    h4?: string;//标题4，默认 mod+opt+4
    h5?: string;//标题5，默认 mod+opt+5
    h6?: string;//标题6，默认 mod+opt+6
};
//使用配置
new Engine(...,{
    config:{
        "heading":{
            //修改快捷键
            hotkey:{
                h1:"快捷键"
            }
        }
    }
 })

Markdown

默认支持 markdown，传入false关闭

Heading 插件 markdown 语法为# ## ### #### ##### ######

markdown?: boolean;//默认开启，false 关闭
//使用配置
new Engine(...,{
    config:{
        "heading":{
            //关闭markdown
            markdown:false
        }
    }
 })

禁用 mark 插件样式效果

可以在标题下禁用 mark 插件效果，默认禁用 ['fontsize', 'bold'] ，在分割、粘贴等情况下过滤掉这些插件样式

disableMark?: Array<string> //mark插件名称集合

要启用的类型（h1 h2 h3 h4 h5 h6）

可以定义 h1 - h6 所需要的节点类型，如果不定义则支持全部

设置后 markdown 也会失效

enableTypes?: Array<string>

另外可能还需要配置 toolbar 中 items 属性的 heading 插件

{
    type: 'dropdown',
    name: 'heading',
    items: [
        {
            key: "p",
            className: 'heading-item-p',
            content: "正文"
        },
        {
            key: "h1",
            className: 'heading-item-h1',
            content: "标题1"
        }
    ]
    }

命令

传入 p 或当前标题样式与当前传入值一致 时将取消标题

//使用 command 执行插件、并传入所需参数
engine.command.execute(
	'heading',
	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p',
);
//使用 command 执行查询当前状态，返回 string | undefined，返回 "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"
engine.command.queryState('heading');