:art: outline add emoji

app/src/assets/scss/base.scss

@@ -62,12 +62,6 @@ progressLoading: 400 // 需大于 .b3-dialog
   }
 }
 
-.outline__title {
-  padding: 0 8px;
-  white-space: nowrap;
-  line-height: 30px;
-}
-
 .fullscreen {
   position: fixed;
   top: 0;

app/src/editor/util.ts

@@ -441,7 +441,7 @@ const updateOutline = (models: IModels, protyle: IProtyle, reload = false) => {
             }, response => {
                 item.update(response, blockId);
                 if (protyle) {
-                    item.updateDocTitle(protyle.title.editElement.textContent);
+                    item.updateDocTitle(protyle.background.ial);
                     if (getSelection().rangeCount > 0) {
                         const startContainer = getSelection().getRangeAt(0).startContainer;
                         if (protyle.wysiwyg.element.contains(startContainer)) {

app/src/emoji/index.ts

@@ -266,6 +266,7 @@ export const openEmojiPanel = (id: string, target: HTMLElement, isNotebook = fal
                     addEmoji(unicode);
                     updateFileTreeEmoji(unicode, id);
                     updateFileEmoji(unicode, id);
+                    updateOutlineEmoji(unicode);
                 });
             }
             return;
@@ -344,6 +345,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
                     window.siyuan.menus.menu.remove();
                     updateFileTreeEmoji("", id);
                     updateFileEmoji("", id);
+                    updateOutlineEmoji("");
                 });
             }
             return;
@@ -373,6 +375,7 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
                     addEmoji(unicode);
                     updateFileTreeEmoji(unicode, id);
                     updateFileEmoji(unicode, id);
+                    updateOutlineEmoji(unicode);
                 });
             }
             return;
@@ -380,6 +383,12 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
     });
 };
 
+export const updateOutlineEmoji = (unicode: string) => {
+    getAllModels().outline.forEach(model => {
+        model.headerElement.nextElementSibling.firstElementChild.innerHTML = unicode2Emoji(unicode || Constants.SIYUAN_IMAGE_FILE);
+    });
+}
+
 export const updateFileTreeEmoji = (unicode: string, id: string, icon = "iconFile") => {
     let emojiElement;
     if (isMobile()) {

app/src/layout/dock/Outline.ts

@@ -11,11 +11,12 @@ import {Constants} from "../../constants";
 import {focusBlock} from "../../protyle/util/selection";
 import {pushBack} from "../../util/backForward";
 import {escapeHtml} from "../../util/escape";
+import {unicode2Emoji} from "../../emoji";
 
 export class Outline extends Model {
     private tree: Tree;
     public element: HTMLElement;
-    private headerElement: HTMLElement;
+    public headerElement: HTMLElement;
     public type: "pin" | "local";
     public blockId: string;
     private openNodes: { [key: string]: string[] } = {};
@@ -46,7 +47,9 @@ export class Outline extends Model {
                             if (this.type === "local" && this.blockId === data.data.id) {
                                 this.parent.updateTitle(data.data.title);
                             } else {
-                                this.updateDocTitle(data.data.title);
+                                this.updateDocTitle({
+                                    title: data.data.title
+                                });
                             }
                             break;
                         case "unmount":
@@ -81,7 +84,7 @@ export class Outline extends Model {
     <span class="${this.type === "local" ? "fn__none " : ""}fn__space"></span>
     <span data-type="min" class="${this.type === "local" ? "fn__none " : ""}block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min} ${updateHotkeyTip(window.siyuan.config.keymap.general.closeTab.custom)}"><svg><use xlink:href='#iconMin'></use></svg></span>
 </div>
-<div class="fn__ellipsis outline__title"></div>
+<div class="b3-list-item"></div>
 <div class="fn__flex-1"></div>`;
         this.element = options.tab.panelElement.lastElementChild as HTMLElement;
         this.headerElement = options.tab.panelElement.firstElementChild as HTMLElement;
@@ -160,10 +163,20 @@ export class Outline extends Model {
         }
     }
 
-    public updateDocTitle(title = "") {
+    public updateDocTitle(ial?:IObject) {
         if (this.type === "pin") {
-            this.headerElement.nextElementSibling.innerHTML = escapeHtml(title);
-            this.headerElement.nextElementSibling.setAttribute("title", title);
+            if (ial) {
+                let iconHTML = `<span class="b3-list-item__graphic">${unicode2Emoji(ial.icon || Constants.SIYUAN_IMAGE_FILE)}</span>`
+                if (typeof ial.icon === "undefined" && this.headerElement.nextElementSibling.firstElementChild) {
+                    iconHTML = this.headerElement.nextElementSibling.firstElementChild.outerHTML;
+                }
+                this.headerElement.nextElementSibling.innerHTML = `${iconHTML}
+<span class="b3-list-item__text">${escapeHtml(ial.title)}</span>`;
+                this.headerElement.nextElementSibling.setAttribute("title", ial.title);
+            } else {
+                this.headerElement.nextElementSibling.innerHTML = "";
+                this.headerElement.nextElementSibling.removeAttribute("title");
+            }
         }
     }
 

app/src/layout/dock/index.ts

@@ -168,7 +168,7 @@ export class Dock {
                                     blockId: editor?.protyle?.block?.rootID,
                                 });
                                 if (editor?.protyle?.title?.editElement) {
-                                    outline.updateDocTitle(editor.protyle.title.editElement.textContent);
+                                    outline.updateDocTitle(editor.protyle?.background?.ial);
                                 }
                                 tab.addModel(outline);
                             }

app/src/protyle/header/Background.ts

@@ -4,7 +4,7 @@ import {hideElements} from "../ui/hideElements";
 import {uploadFiles} from "../upload";
 import {hideMessage} from "../../dialog/message";
 import {fetchPost} from "../../util/fetch";
-import {getRandomEmoji, openEmojiPanel, unicode2Emoji, updateFileTreeEmoji} from "../../emoji";
+import {getRandomEmoji, openEmojiPanel, unicode2Emoji, updateFileTreeEmoji, updateOutlineEmoji} from "../../emoji";
 import {upDownHint} from "../../util/upDownHint";
 import {setPosition} from "../../util/setPosition";
 import {openGlobalSearch} from "../../search/util";
@@ -232,6 +232,7 @@ export class Background {
                         this.ial.icon = emoji;
                         this.render(this.ial, protyle.block.rootID);
                         updateFileTreeEmoji(emoji, protyle.block.rootID);
+                        updateOutlineEmoji(emoji);
                         fetchPost("/api/attr/setBlockAttrs", {
                             id: protyle.block.rootID,
                             attrs: {"icon": emoji}