feat(website): WIP 正在为内部链接挂件实现预览

TODO:

- 处理地址中有章节且章节就在本页的情况。
  - 对于实验场和示例，不显示预览（并进行说明），但要注意处理章节变更的情
    况。
  - 对于语法参考，应该显示预览。

- 缩短预览。
  - 被省略的部分应该有不易与内容混淆的提示。
  - 如果地址中没有章节：则范围从最初开始。
  - 如果地址中有章节，且对应章节存在：则范围从那个章节的标题开始。
  - 如果地址中有章节，切对应的章节不存在：则应该显示相关说明。
  - 预览的结尾，应该在 "从预览开头的第一个非标题元素起，遇到的第一个标题
    元素" 之前。

- 在加载时显示加载指示器。

此外，之后还需要完成两件事：

1. 悬浮状态的挂件的悬浮框部分，其宽度目前会受到主要部分开头的位置的影
   响，这并非预期行为。理想情况下，悬浮框的最大宽度总应该是其所处容器
   的宽度，且悬浮框应尽量满足其内容的宽度。在可满足的宽度不大于从主要
   部分到容器右侧边界的距离时，悬浮框应该像现在这样，其左侧应该与主要
   部分的左侧对其。但当不能满足上述距离时，悬浮框的对其方式应该变为：
   悬浮框的右侧贴在容器的右侧边界。

   应将悬浮框固定时的实现方式回退到原先顶部偏移的方案（即悬浮时的方案），
   以确保不同的显示形式之间不存在不一致。之后，悬浮框的最大宽度应该由其
   容器的宽度决定。原先盛放主要部分以及固定的悬浮框的悬浮框依旧使用
   inline-grid，只是原先悬浮框的改为放置一个 dummy 元素：在挂件固定时，
   该元素的高度与宽度与悬浮框同步，其他情况下则不存在。

2. 改回使用顶部偏移的方案后，就可以考虑将悬浮框实现为 sticky 了。悬浮框
   应该根据其外层（如果存在）的悬浮框决定为顶部预留的空白高度，以实现头
   部嵌套堆叠的效果。

website/src/custom-elements/domestic-internal/README.md

@@ -0,0 +1,4 @@
+## `domestic-internal`
+
+与 `domestic` 的区别是：这里包含的自定义元素是专用于本单页面应用的，并不<wbr />
+适用于通常场景。

website/src/pages/SyntaxReference/RotextExample/create-store.ts → website/src/custom-elements/domestic-internal/rotext-example/create-store.ts

@@ -1,7 +1,7 @@
 import { createEffect, createMemo, createSignal, on } from "solid-js";
 
 import { useRotextProcessorsStore } from "../../../contexts/rotext-processors-store";
-import { TAG_NAME_MAP } from "../../../custom-elements/mod";
+import { TAG_NAME_MAP } from "../../mod";
 import { formatHTML } from "../../../utils/html-formatting";
 
 export type CurrentOutput =

website/src/pages/SyntaxReference/RotextExample/mod.tsx → website/src/custom-elements/domestic-internal/rotext-example/mod.tsx

@@ -3,6 +3,7 @@ import { customElement, getCurrentElement, noShadowDOM } from "solid-element";
 
 import * as Ankor from "ankor";
 
+import { findClosestElementEx } from "@rolludejo/internal-web-shared/dom";
 import { ShadowRootAttacher } from "@rolludejo/internal-web-shared/shadow-root";
 
 import { styleProvider as styleProviderForPreflight } from "../../../styles/preflight";
@@ -13,7 +14,6 @@ import { styleProvider as styleProviderForTuanProse } from "../../../styles/tuan
 import { createRotextExampleStore } from "./create-store";
 
 import { MainCard } from "./MainCard";
-import { findClosestElementEx } from "@rolludejo/internal-web-shared";
 
 export function registerCustomElement(tag: string) {
   customElement(

website/src/pages/SyntaxReference/RotextExample/output-parts/Preview.tsx → website/src/custom-elements/domestic-internal/rotext-example/output-parts/Preview.tsx

@@ -12,15 +12,10 @@ import { Idiomorph } from "idiomorph/dist/idiomorph.esm.js";
 
 import * as Ankor from "ankor";
 
-import {
-  PROSE_CLASS,
-  registerCustomElementsOnce,
-} from "../../../../custom-elements/mod";
+import { PROSE_CLASS } from "../../../mod";
 
 export type PreviewContent = ["html", string];
 
-registerCustomElementsOnce();
-
 export const Preview: Component<{
   content: () => PreviewContent;
 }> = (props) => {

website/src/custom-elements/internal-link/preview.tsx

@@ -1,4 +1,10 @@
-import { createEffect, createMemo } from "solid-js";
+import {
+  createEffect,
+  createMemo,
+  createResource,
+  on,
+  onMount,
+} from "solid-js";
 import { render } from "solid-js/web";
 
 import * as Ankor from "ankor";
@@ -14,8 +20,11 @@ import { AnkorWidgetNavigationInnerRenderer } from "@rotext/solid-components/int
 import { createSignalGetterFromWatchable } from "../hooks";
 
 import { styleProvider as styleProviderForPreflight } from "../../styles/preflight";
+import { styleProvider as styleProviderForTailwind } from "../../styles/tailwind";
+
 import { closestScrollContainer } from "../../utils/mod";
 import Global from "../../global";
+import { syntaxReferenceResourceManager } from "../../resource-managers/syntax-reference";
 
 export function createDemoPreviewRenderer(
   createRendererOpts: { proseClass: string; proseStyleProvider: StyleProvider },
@@ -40,11 +49,40 @@ export function createDemoPreviewRenderer(
           );
           const address = createMemo(() => parseAddress(rawAddr()));
 
+          let contentContainerEl!: HTMLDivElement;
+
+          const [pageHTMLRaw] = createResource(() => {
+            const page = address().page;
+            if (!page) return null;
+            return syntaxReferenceResourceManager.getPage(page);
+          });
+          onMount(() => {
+            createEffect(on([pageHTMLRaw], ([pageHTMLRaw]) => {
+              if (!pageHTMLRaw) {
+                contentContainerEl.innerHTML = "TODO";
+              } else {
+                contentContainerEl.innerHTML = pageHTMLRaw;
+              }
+            }));
+          });
+
           return (
             <ShadowRootAttacher
-              styleProviders={[styleProviderForPreflight, proseStyleProvider]}
+              styleProviders={[
+                styleProviderForPreflight,
+                styleProviderForTailwind,
+                proseStyleProvider,
+              ]}
             >
-              <span>{`TODO: ${rawAddr()}`}</span>
+              <div class={Ankor.WIDGET_OWNER_CLASS}>
+                <div class={`${Ankor.CONTENT_CLASS} p-2 md:p-4`}>
+                  <div class={`${Ankor.ANCHOR_CLASS} relative z-10`} />
+                  <div
+                    ref={contentContainerEl}
+                    class="tuan-background tuan-prose break-all"
+                  />
+                </div>
+              </div>
             </ShadowRootAttacher>
           );
         }, el);
@@ -58,7 +96,7 @@ export function createDemoPreviewRenderer(
         // 类其他属性里。
         // 对于导航类挂件（如本挂件及引用链接）：在最外层有多个 widget owner 时
         // （比如在一个串中），应当额外考虑目标地址是否已经处于页面当中（已经加载）。
-        const currentPage = window.location.pathname.split("/").at(-1);
+        const currentPage = Global.currentPageName!;
 
         const { page, section } = parseAddress(rawAddrW.currentValue);
 

website/src/custom-elements/mod.ts

@@ -9,6 +9,8 @@ import { registerCustomElement as registerCustomElementForScratchOff } from "./d
 import { registerCustomElement as registerCustomElementForCollapse } from "./domestic/Collapse";
 import { registerCustomElement as registerCustomElementForCodeBlock } from "./domestic/CodeBlock";
 
+import { registerCustomElement as registerCustomElementForRotextPreview } from "./domestic-internal/rotext-example/mod";
+
 let hasRegistered = false;
 
 export function registerCustomElementsOnce() {
@@ -21,4 +23,6 @@ export function registerCustomElementsOnce() {
   registerCustomElementForScratchOff(TAG_NAME_MAP["scratch-off"]);
   registerCustomElementForCollapse(TAG_NAME_MAP["collapse"]);
   registerCustomElementForCodeBlock(TAG_NAME_MAP["code-block"]);
+
+  registerCustomElementForRotextPreview("x-rotext-example");
 }

website/src/global.ts

@@ -1,6 +1,7 @@
 import type { Navigator } from "@solidjs/router";
 
 const stuff: {
+  currentPageName?: string | null;
   navigator?: Navigator;
 } = {};
 
@@ -9,3 +10,7 @@ export default stuff;
 export function initializeGlobal(initialStuff: Required<typeof stuff>) {
   Object.assign(stuff, initialStuff);
 }
+
+export function updateGlobalCurrentPageName(name: string | null) {
+  stuff.currentPageName = name;
+}

website/src/index.tsx

@@ -4,6 +4,7 @@ import { render } from "solid-js/web";
 
 import { RotextProcessorName } from "./hooks/rotext-processors-store";
 import { RotextProcessorsStoreProvider } from "./contexts/rotext-processors-store";
+import { registerCustomElementsOnce } from "./custom-elements/mod";
 
 import { Root } from "./components/layout";
 
@@ -19,6 +20,8 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
   );
 }
 
+registerCustomElementsOnce();
+
 render(() => {
   return (
     <RotextProcessorsStoreProvider

website/src/pages/Playground/mod.tsx

@@ -6,7 +6,7 @@ import { initializeGlobal } from "../../global";
 import MainCard from "./MainCard";
 
 export default (() => {
-  initializeGlobal({ navigator: useNavigate() });
+  initializeGlobal({ currentPageName: null, navigator: useNavigate() });
 
   return (
     <div class="w-full h-full xl:pr-2">

website/src/pages/Playground/preview-parts/Preview/mod.tsx

@@ -16,10 +16,7 @@ import * as Ankor from "ankor";
 import { ErrorAlert } from "@rotext/solid-components/internal";
 
 import { debounceEventHandler } from "../../../../utils/mod";
-import {
-  PROSE_CLASS,
-  registerCustomElementsOnce,
-} from "../../../../custom-elements/mod";
+import { PROSE_CLASS } from "../../../../custom-elements/mod";
 
 import { ActiveLines, EditorStore, TopLine } from "../../editor-store";
 import { createAutoResetCounter } from "../../../../hooks/auto-reset-counter";
@@ -28,8 +25,6 @@ import { RotextProcessResult } from "../../../../processors/mod";
 import { LookupList, LookupListRaw } from "./internal-types";
 import * as ScrollUtils from "./scroll-utils";
 
-registerCustomElementsOnce();
-
 const CONTENT_ROOT_CLASS = "previewer-content-root";
 
 const Preview: Component<

website/src/pages/SyntaxReference/mod.tsx

@@ -16,22 +16,21 @@ import { Button, Card, Loading } from "../../components/ui/mod";
 import "../../styles/tuan-prose";
 import { syntaxReferenceResourceManager } from "../../resource-managers/syntax-reference";
 import { getSyntaxReferencePathOfHeading } from "../../utils/syntax-reference";
-import { initializeGlobal } from "../../global";
-
-import { registerCustomElement as registerCustomElementForRotextPreview } from "./RotextExample/mod";
-
-registerCustomElementForRotextPreview("x-rotext-example");
+import { initializeGlobal, updateGlobalCurrentPageName } from "../../global";
 
 export default (() => {
-  initializeGlobal({ navigator: useNavigate() });
-
   let contentContainerEl!: HTMLDivElement;
 
   const params = useParams();
   const pageName = createMemo(() => decodeURIComponent(params.pageName!));
   const navigate = useNavigate();
   const location = useLocation();
 
+  initializeGlobal({ currentPageName: null, navigator: navigate });
+  createEffect(on([pageName], ([pageName]) => {
+    updateGlobalCurrentPageName(pageName);
+  }));
+
   const [isIndexLoaded, setIsIndexLoaded] = createSignal(false);
 
   const [pageHTMLRaw] = createResource(
@@ -167,11 +166,13 @@ export default (() => {
               )}
             </Show>
           </div>
-          <div class="max-h-full h-fit overflow-y-scroll overflow-x-hidden">
-            <div
-              ref={contentContainerEl}
-              class={`${Ankor.CONTENT_CLASS} p-4 tuan-background tuan-prose break-all`}
-            />
+          <div
+            class={`${Ankor.WIDGET_OWNER_CLASS} max-h-full h-fit overflow-y-scroll overflow-x-hidden`}
+          >
+            <div class="p-4 tuan-background tuan-prose break-all">
+              <div class={Ankor.ANCHOR_CLASS} />
+              <div class={Ankor.CONTENT_CLASS} ref={contentContainerEl} />
+            </div>
           </div>
         </div>
       </Card>