登录注册

API 获取并处理块的一些疑问

本贴最后更新于 369 天前，其中的信息可能已经物是人非

因为突然想要写一个插件来帮我格式化一下普通的内容块，所以今天研究了一个晚上的插件开发和 api，现在发现内容块 API 有点问题不好理解，希望各位能帮我解答一二。

在更新块 API 里支持两种模式：markdown 和 DOM。不过这两种元素我感觉都不是很好获取。
1. 使用 api 能获取的是 kramdown，这个会带有 {: updated id} 属性，要是用 markdown 再发回去就会当成普通的文字放进去。
2. DOM 也不算好获取，从块标里面的插件按钮获取到的结果是不带 HTML 的，没法获取当前元素的 html。这样难道只能用 ts 去页面里获取吗？
获取了 kramdown 之后，如果要更新块一定要去掉 {: updated id} 这个属性吗，有没有可能不处理这个属性也不影响文本显示的办法？
有可能通过 api 获取到当前块的 dom？或者获取到当前块的类型？
还在继续思考中...感谢各位的帮助。如果想要先行了解代码可以先在这里了解最新的进度。目前通过 ai 暂时解决了 {: updated id} 属性，不过这个方法不算好，也希望各位能帮我提出一些建议。

思源笔记

思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

融合块、大纲和双向链接，重构你的思维。
28446 引用 • 119790 回帖
Q&A

提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
11155 引用 • 50666 回帖 • 52 关注

1 引用

思源笔记插件开发笔记丨调用 api 操作块支持撤回（使用 Transaction） • Achuan-2

EmptyLight 11 个月前

50 悬赏

1 关注

5 收藏

1 引用

11 回帖

831 197 12 340 3 278

相关帖子

被采纳的回答

player • 11 个月前 • 3

付费者捐赠者

"/api/block/insertBlock" "/api/block/updateBlock" 可以传入 kramdown。内容与属性需要用 '\n' 来隔开。

id updated 可以不用去掉。如果你要插入新的块，需要生成新的 id 避免重复。

"/api/block/getBlockDOM" 可以按块 id 读取 dom.

"/api/transactions" 可以按 dom 来更新或者插入等。

另外， dom 与 markdown 的转换可以用：
export const NewLute: () => Lute = (globalThis as any).Lute.New;

lute = NewLute();

const md = lute.BlockDOM2Md(div.outerHTML);

export class Lute {
    public static WalkStop: number;
    public static WalkSkipChildren: number;
    public static WalkContinue: number;
    public static Version: string;
    public static Caret: string;

    public static New(): Lute;

    public static EChartsMindmapStr(text: string): string;

    public static NewNodeID(): string;

    public static Sanitize(html: string): string;

    public static EscapeHTMLStr(str: string): string;

    public static UnEscapeHTMLStr(str: string): string;

    public static GetHeadingID(node: ILuteNode): string;

    public static BlockDOM2Content(html: string): string;

    private constructor();

    public BlockDOM2Content(text: string): string;

    public BlockDOM2EscapeMarkerContent(text: string): string;

    public SetSpin(enable: boolean): void;

    public SetTextMark(enable: boolean): void;

    public SetHTMLTag2TextMark(enable: boolean): void;

    public SetHeadingID(enable: boolean): void;

    public SetProtyleMarkNetImg(enable: boolean): void;

    public SetSpellcheck(enable: boolean): void;

    public SetFileAnnotationRef(enable: boolean): void;

    public SetSetext(enable: boolean): void;

    public SetYamlFrontMatter(enable: boolean): void;

    public SetChineseParagraphBeginningSpace(enable: boolean): void;

    public SetRenderListStyle(enable: boolean): void;

    public SetImgPathAllowSpace(enable: boolean): void;

    public SetKramdownIAL(enable: boolean): void;

    public BlockDOM2Md(html: string): string;

    public BlockDOM2StdMd(html: string): string;

    public SetSuperBlock(enable: boolean): void;

    public SetTag(enable: boolean): void;

    public SetInlineMath(enable: boolean): void;

    public SetGFMStrikethrough(enable: boolean): void;

    public SetGFMStrikethrough1(enable: boolean): void;

    public SetMark(enable: boolean): void;

    public SetSub(enable: boolean): void;

    public SetSup(enable: boolean): void;

    public SetInlineAsterisk(enable: boolean): void;

    public SetInlineUnderscore(enable: boolean): void;

    public SetBlockRef(enable: boolean): void;

    public SetSanitize(enable: boolean): void;

    public SetHeadingAnchor(enable: boolean): void;

    public SetImageLazyLoading(imagePath: string): void;

    public SetInlineMathAllowDigitAfterOpenMarker(enable: boolean): void;

    public SetToC(enable: boolean): void;

    public SetIndentCodeBlock(enable: boolean): void;

    public SetParagraphBeginningSpace(enable: boolean): void;

    public SetFootnotes(enable: boolean): void;

    public SetLinkRef(enable: boolean): void;

    public SetEmojiSite(emojiSite: string): void;

    public PutEmojis(emojis: IObject): void;

    public SpinBlockDOM(html: string): string;

    public Md2BlockDOM(html: string): string;

    public SetProtyleWYSIWYG(wysiwyg: boolean): void;

    public MarkdownStr(name: string, md: string): string;

    public GetLinkDest(text: string): string;

    public BlockDOM2InlineBlockDOM(html: string): string;

    public BlockDOM2HTML(html: string): string;

    public HTML2Md(html: string): string;

    public HTML2BlockDOM(html: string): string;
}

11 回帖

API 获取并处理块的一些疑问

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册关于

请输入回帖内容 ...

player • 11 个月前 • 2 • 2 评论

付费者捐赠者

补充几个我常用的工具，用于创建一系列 IOperation, 传给 "/api/transactions" 即可。批量的 IOperation 形成一个事务。

  transBatchUpdateAttrs(blockAttrs: { id: string, old: AttrType, new: AttrType }[]) {
        return blockAttrs.map(b => {
            const op = {} as IOperation;
            op.action = "updateAttrs";
            op.id = b.id;
            op.data = JSON.stringify({ old: b.old, new: b.new });
            return op;
        });
    },

  transUpdateBlocks(ops: { id: string, domStr: string }[]) {
        ops = ops.filter(op => !!op.id);
        if (!(ops.length > 0)) return [];
        return ops.map(({ id, domStr }) => {
            const op = {} as IOperation;
            op.action = "update"; // dom
            op.id = id;
            op.data = domStr;
            return op;
        });
    },

  transDeleteBlocks(ids: string[]) {
        return ids?.map(id => {
            const op = {} as IOperation;
            op.action = "delete";
            op.id = id;
            return op;
        }) ?? [];
    },

  transMoveBlocksAfter(ids: string[], previousID: string) {
        return ids.slice().reverse().map(id => {
            const op = {} as IOperation;
            op.action = "move";
            op.id = id;
            op.previousID = previousID;
            return op;
        });
    },

    transMoveBlocksAsChild(ids: string[], parentID: string) {
        return ids.slice().reverse().map(id => {
            const op = {} as IOperation;
            op.action = "move";
            op.id = id;
            op.parentID = parentID;
            return op;
        });
    },

1 回复

感谢大佬

Achuan-2 • 11 个月前

感谢大佬

EmptyLight • 11 个月前

其他回帖

EmptyLight • 11 个月前 • 1

付费者作者

经过研究和 V 大在 issue 的回复，现在整理出要更新块使用的插件 API。

// 代码在插件环境中使用，这里略过前面的处理，直接到提交事务部分
// 这部分代码本来不是一个方法，这里封装过了
// 仅需要更新一个块
function updateOneBlock(blockId: string, updatedDom: string, originalDom: string, protyle: Protyle["protyle"]) {
    // protyle是{detail}获取的detail.protyle，这里获取当前编辑器的实例
    // blockId是{detail}获取的当前块的块id，仅适用于一个块
    // updatedDom和originalDom是修改后的Dom和修改前的Dom，用于撤回操作
    protyle.getInstance().updateTransaction(blockId, updatedDom, originalDom);
    // 操作后需要等待操作完成刷新界面，但是这部分获取有点问题，不知道什么时候事务完成
    // 如果使用getIns().isuploading()获取，好像无法判断当前是否完成事务
    // 这里刷新界面，建议自行设置延时，示例中不进行处理了
    protyle.getInstance().reload(true);
}

// 需要更新多个块
function updateMultiBlock(doOperations: IOperation[], undoOperations: IOperation[], protyle: Protyle["protyle"]) {
    // 这里的protyle不变
    protyle.getInstance().transaction(doOperations, undoOperations);
    // 这里用到的do和undo分别是自行封装的IOperation数组，其中的action是必须项，可用id标识修改块，data标识更新前后的dom
    // 可参考前面Achuan-2给出的/api/transactions代码，不过需要单独处理do和undo
    // 之后要不要刷新还没有进行测试，这里给出刷新代码
    protyle.getInstance().reload(true);
}

// 封装doOperation和undoOperation的方法
// 这里只收一组数据，多组数据请自行处理
function setTrans(blockId: String, updatedDom: string, originalDom: string) {
    let doOperations: IOperations[] = [];
    let undoOperations: IOperations[] = [];
    doOperations.push({
        action: "update",
        id: blockId,
        data: updatedDom
    });
    undoOperations.push({
        action: "update",
        id: blockId,
        data: originalDom
    });
    let transaction = [doOperations, undoOperations];
    return transaction;
}

这里给出的基本上都是思路，具体实现需要根据使用环境进行修改。

撤回需要从 eventBus 获取当前的 protyle 实例，即 detail.protyle.getInstance()，用这个实例提交事务 updateTransaction 或者 updateBatchTransaction，或是直接使用 transaction 提交自己封装好的 do 和 undo 操作。

在 do 和 undo 操作或者事务 updateTransaction 中需要提交修改前后的 dom，以此写入撤回栈，完成撤回操作。如果直接通过 /api/transactions 调用事务无法写入前端的撤回。

如果不获取当前的 protyle 实例而直接使用 Protyle.prototype.updateTransaction 来提交事务，可以更新块但是无法写入撤回栈。

调用后端 api 和使用插件 Protyle api 只能二选一，并且任何时候如果将要修改的块 id 传入到 blockId 属性会立即触发数据错误弹窗（退出 or 重建索引）。而传入 id 属性不会。

对于非更新操作也可类推。

wilsons • 11 个月前
付费者捐赠者

一般没必要使用/api/transactions 这个 api 吧，这个 api 的使用场景应该是那些需要事务的操作，比如多个操作保证原子性。

1 回复
EmptyLight • 11 个月前 • 1 评论
付费者作者

/api/transactions 的参数是只有 HTML 还是同时兼容 markdown 呢

只有 html

player • 11 个月前
查看全部回帖

EmptyLight

就地开摆，有事邮件，爱发电：https://afdian.com/a/tingyuting

回帖

1247

帖子

积分

15792

API 获取并处理块的一些疑问

相关帖子

申请退款, 找不到退款链接

标记背景底色能修改吗

如何使笔记本折叠后，记忆之前打开的格式，再次打开时恢复

问题反馈：右边侧边栏最小过宽

如何修改鼠标选中时的文本样式?

请问文档树中「笔记本」「子文档」的选择器分别是什么？

思源有类似 sonovel 的插件吗？？

欢迎来到这里！

近期热议

推荐标签标签

最新标签

API 获取并处理块的一些疑问

相关帖子

申请退款, 找不到退款链接

标记背景底色能修改吗

如何使笔记本折叠后，记忆之前打开的格式，再次打开时恢复

问题反馈：右边侧边栏最小过宽

如何修改鼠标选中时的文本样式?

请问文档树中「笔记本」「子文档」的选择器分别是什么？

思源有类似 sonovel 的插件吗？？

欢迎来到这里！

近期热议

推荐标签 标签

最新标签

推荐标签标签