feat(editor): reference, mention and latex inline extension (#11914)

Closes: BS-3215
Closes: BS-3218
Closes: BS-3217

blocksuite/affine/all/src/__tests__/adapters/html.unit.spec.ts

@@ -125,7 +125,7 @@ describe('snapshot to html', () => {
     };
 
     const html = template(
-      `<pre class="shiki light-plus" style="background-color:#FFFFFF;color:#000000" tabindex="0"><code><span class="line"><span style="color:#AF00DB">import</span><span style="color:#000000"> this</span></span></code></pre>`
+      `<pre><code class="code-python">import this</code></pre>`
     );
 
     const htmlAdapter = new HtmlAdapter(createJob(), provider);
@@ -191,7 +191,7 @@ describe('snapshot to html', () => {
     };
 
     const html = template(
-      `<pre class="shiki light-plus" style="background-color:#FFFFFF;color:#000000" tabindex="0"><code><span class="line"><span>import this</span></span></code></pre>`
+      `<pre><code class="code-PYTHON">import this</code></pre>`
     );
 
     const htmlAdapter = new HtmlAdapter(createJob(), provider);
@@ -257,7 +257,7 @@ describe('snapshot to html', () => {
     };
 
     const html = template(
-      `<pre class="shiki light-plus" style="background-color:#FFFFFF;color:#000000" tabindex="0"><code><span class="line"><span>import this</span></span></code></pre>`
+      `<pre><code class="code-unknown">import this</code></pre>`
     );
 
     const htmlAdapter = new HtmlAdapter(createJob(), provider);

blocksuite/affine/all/src/__tests__/utils/store.ts

@@ -1,49 +1,7 @@
-import { AttachmentStoreExtension } from '@blocksuite/affine-block-attachment/store';
-import { BookmarkStoreExtension } from '@blocksuite/affine-block-bookmark/store';
-import { CalloutStoreExtension } from '@blocksuite/affine-block-callout/store';
-import { CodeStoreExtension } from '@blocksuite/affine-block-code/store';
-import { DataViewStoreExtension } from '@blocksuite/affine-block-data-view/store';
-import { DatabaseStoreExtension } from '@blocksuite/affine-block-database/store';
-import { DividerStoreExtension } from '@blocksuite/affine-block-divider/store';
-import { EdgelessTextStoreExtension } from '@blocksuite/affine-block-edgeless-text/store';
-import { EmbedStoreExtension } from '@blocksuite/affine-block-embed/store';
-import { FrameStoreExtension } from '@blocksuite/affine-block-frame/store';
-import { ImageStoreExtension } from '@blocksuite/affine-block-image/store';
-import { LatexStoreExtension } from '@blocksuite/affine-block-latex/store';
-import { ListStoreExtension } from '@blocksuite/affine-block-list/store';
-import { NoteStoreExtension } from '@blocksuite/affine-block-note/store';
-import { ParagraphStoreExtension } from '@blocksuite/affine-block-paragraph/store';
-import { SurfaceRefStoreExtension } from '@blocksuite/affine-block-surface-ref/store';
-import { TableStoreExtension } from '@blocksuite/affine-block-table/store';
 import { StoreExtensionManager } from '@blocksuite/affine-ext-loader';
-import { FootnoteStoreExtension } from '@blocksuite/affine-inline-footnote/store';
-import { LinkStoreExtension } from '@blocksuite/affine-inline-link/store';
 
-import { MigratingStoreExtension } from '../../extensions/store';
+import { getInternalStoreExtensions } from '../../extensions/store';
 
-const manager = new StoreExtensionManager([
-  AttachmentStoreExtension,
-  BookmarkStoreExtension,
-  CalloutStoreExtension,
-  CodeStoreExtension,
-  DataViewStoreExtension,
-  DatabaseStoreExtension,
-  DividerStoreExtension,
-  EdgelessTextStoreExtension,
-  EmbedStoreExtension,
-  FrameStoreExtension,
-  ImageStoreExtension,
-  LatexStoreExtension,
-  ListStoreExtension,
-  NoteStoreExtension,
-  ParagraphStoreExtension,
-  SurfaceRefStoreExtension,
-  TableStoreExtension,
-
-  FootnoteStoreExtension,
-  LinkStoreExtension,
-
-  MigratingStoreExtension,
-]);
+const manager = new StoreExtensionManager(getInternalStoreExtensions());
 
 export const testStoreExtensions = manager.get('store');

blocksuite/affine/all/src/adapters/extension.ts

@@ -2,7 +2,6 @@ import {
   HtmlInlineToDeltaAdapterExtensions,
   InlineDeltaToHtmlAdapterExtensions,
   InlineDeltaToMarkdownAdapterExtensions,
-  InlineDeltaToPlainTextAdapterExtensions,
   MarkdownInlineToDeltaAdapterExtensions,
   NotionHtmlInlineToDeltaAdapterExtensions,
 } from '@blocksuite/affine-inline-preset';
@@ -62,8 +61,5 @@ export function getNotionHtmlAdapterExtensions(): ExtensionType[] {
 }
 
 export function getPlainTextAdapterExtensions(): ExtensionType[] {
-  return [
-    ...defaultBlockPlainTextAdapterMatchers,
-    ...InlineDeltaToPlainTextAdapterExtensions,
-  ];
+  return [...defaultBlockPlainTextAdapterMatchers];
 }

blocksuite/affine/all/src/extensions/effects.ts

@@ -29,10 +29,7 @@ import { effects as componentViewDropdownMenuEffects } from '@blocksuite/affine-
 import { effects as fragmentDocTitleEffects } from '@blocksuite/affine-fragment-doc-title/effects';
 import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects';
 import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects';
-import { effects as inlineLatexEffects } from '@blocksuite/affine-inline-latex/effects';
-import { effects as inlineMentionEffects } from '@blocksuite/affine-inline-mention';
 import { effects as inlinePresetEffects } from '@blocksuite/affine-inline-preset/effects';
-import { effects as inlineReferenceEffects } from '@blocksuite/affine-inline-reference/effects';
 import { effects as richTextEffects } from '@blocksuite/affine-rich-text/effects';
 import { effects as widgetDragHandleEffects } from '@blocksuite/affine-widget-drag-handle/effects';
 import { effects as widgetEdgelessAutoConnectEffects } from '@blocksuite/affine-widget-edgeless-auto-connect/effects';
@@ -50,10 +47,7 @@ export function effects() {
   dataViewEffects();
   richTextEffects();
 
-  inlineReferenceEffects();
   inlinePresetEffects();
-  inlineLatexEffects();
-  inlineMentionEffects();
 
   blockSurfaceEffects();
   blockRootEffects();

blocksuite/affine/all/src/extensions/migrating-store.ts

@@ -0,0 +1,118 @@
+import { DatabaseSelectionExtension } from '@blocksuite/affine-block-database';
+import {
+  RootBlockHtmlAdapterExtension,
+  RootBlockMarkdownAdapterExtension,
+  RootBlockNotionHtmlAdapterExtension,
+} from '@blocksuite/affine-block-root';
+import { SurfaceBlockSchemaExtension } from '@blocksuite/affine-block-surface';
+import {
+  type StoreExtensionContext,
+  StoreExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import {
+  HtmlInlineToDeltaAdapterExtensions,
+  InlineDeltaToHtmlAdapterExtensions,
+  InlineDeltaToMarkdownAdapterExtensions,
+  MarkdownInlineToDeltaAdapterExtensions,
+  NotionHtmlInlineToDeltaAdapterExtensions,
+} from '@blocksuite/affine-inline-preset';
+import {
+  RootBlockSchemaExtension,
+  TranscriptionBlockSchemaExtension,
+} from '@blocksuite/affine-model';
+import {
+  HtmlAdapterFactoryExtension,
+  MarkdownAdapterFactoryExtension,
+  MixTextAdapterFactoryExtension,
+  NotionHtmlAdapterFactoryExtension,
+  NotionTextAdapterFactoryExtension,
+  PlainTextAdapterFactoryExtension,
+} from '@blocksuite/affine-shared/adapters';
+import { HighlightSelectionExtension } from '@blocksuite/affine-shared/selection';
+import {
+  BlockMetaService,
+  FeatureFlagService,
+  FileSizeLimitService,
+  LinkPreviewerService,
+} from '@blocksuite/affine-shared/services';
+import {
+  BlockSelectionExtension,
+  CursorSelectionExtension,
+  SurfaceSelectionExtension,
+  TextSelectionExtension,
+} from '@blocksuite/std';
+import type { ExtensionType } from '@blocksuite/store';
+
+function getAdapterFactoryExtensions(): ExtensionType[] {
+  return [
+    MarkdownAdapterFactoryExtension,
+    PlainTextAdapterFactoryExtension,
+    HtmlAdapterFactoryExtension,
+    NotionTextAdapterFactoryExtension,
+    NotionHtmlAdapterFactoryExtension,
+    MixTextAdapterFactoryExtension,
+  ];
+}
+
+const defaultBlockHtmlAdapterMatchers = [RootBlockHtmlAdapterExtension];
+
+const defaultBlockMarkdownAdapterMatchers = [RootBlockMarkdownAdapterExtension];
+
+const defaultBlockNotionHtmlAdapterMatchers: ExtensionType[] = [
+  RootBlockNotionHtmlAdapterExtension,
+];
+
+function getHtmlAdapterExtensions(): ExtensionType[] {
+  return [
+    ...HtmlInlineToDeltaAdapterExtensions,
+    ...defaultBlockHtmlAdapterMatchers,
+    ...InlineDeltaToHtmlAdapterExtensions,
+  ];
+}
+
+function getMarkdownAdapterExtensions(): ExtensionType[] {
+  return [
+    ...MarkdownInlineToDeltaAdapterExtensions,
+    ...defaultBlockMarkdownAdapterMatchers,
+    ...InlineDeltaToMarkdownAdapterExtensions,
+  ];
+}
+
+function getNotionHtmlAdapterExtensions(): ExtensionType[] {
+  return [
+    ...NotionHtmlInlineToDeltaAdapterExtensions,
+    ...defaultBlockNotionHtmlAdapterMatchers,
+  ];
+}
+
+const MigratingStoreExtensions: ExtensionType[] = [
+  RootBlockSchemaExtension,
+  SurfaceBlockSchemaExtension,
+  TranscriptionBlockSchemaExtension,
+
+  BlockSelectionExtension,
+  TextSelectionExtension,
+  SurfaceSelectionExtension,
+  CursorSelectionExtension,
+  HighlightSelectionExtension,
+  DatabaseSelectionExtension,
+
+  getHtmlAdapterExtensions(),
+  getMarkdownAdapterExtensions(),
+  getNotionHtmlAdapterExtensions(),
+  getAdapterFactoryExtensions(),
+
+  FeatureFlagService,
+  LinkPreviewerService,
+  FileSizeLimitService,
+  BlockMetaService,
+].flat();
+
+export class MigratingStoreExtension extends StoreExtensionProvider {
+  override name = 'migrating';
+
+  override setup(context: StoreExtensionContext) {
+    super.setup(context);
+    context.register(MigratingStoreExtensions);
+  }
+}

blocksuite/affine/all/src/extensions/migrating-view.ts

@@ -0,0 +1,42 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+import {
+  MigratingEdgelessEditorBlockSpecs,
+  MigratingPageEditorBlockSpecs,
+  MigratingPreviewEdgelessEditorBlockSpecs,
+  MigratingPreviewPageEditorBlockSpecs,
+} from './migrating';
+
+export class MigratingViewExtension extends ViewExtensionProvider {
+  override name = 'migrating';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    const scope = context.scope;
+    if (scope === 'preview-page') {
+      context.register(MigratingPreviewPageEditorBlockSpecs);
+      return;
+    }
+    if (scope === 'preview-edgeless') {
+      context.register(MigratingPreviewEdgelessEditorBlockSpecs);
+      return;
+    }
+    if (scope === 'page' || scope === 'mobile-page') {
+      context.register(MigratingPageEditorBlockSpecs);
+      return;
+    }
+    if (scope === 'edgeless' || scope === 'mobile-edgeless') {
+      context.register(MigratingEdgelessEditorBlockSpecs);
+      return;
+    }
+  }
+}

blocksuite/affine/all/src/extensions/store.ts

@@ -1,124 +1,52 @@
-import { DatabaseSelectionExtension } from '@blocksuite/affine-block-database';
-import {
-  RootBlockHtmlAdapterExtension,
-  RootBlockMarkdownAdapterExtension,
-  RootBlockNotionHtmlAdapterExtension,
-} from '@blocksuite/affine-block-root';
-import { SurfaceBlockSchemaExtension } from '@blocksuite/affine-block-surface';
-import {
-  type StoreExtensionContext,
-  StoreExtensionProvider,
-} from '@blocksuite/affine-ext-loader';
-import {
-  HtmlInlineToDeltaAdapterExtensions,
-  InlineDeltaToHtmlAdapterExtensions,
-  InlineDeltaToMarkdownAdapterExtensions,
-  InlineDeltaToPlainTextAdapterExtensions,
-  MarkdownInlineToDeltaAdapterExtensions,
-  NotionHtmlInlineToDeltaAdapterExtensions,
-} from '@blocksuite/affine-inline-preset';
-import {
-  RootBlockSchemaExtension,
-  TranscriptionBlockSchemaExtension,
-} from '@blocksuite/affine-model';
-import {
-  HtmlAdapterFactoryExtension,
-  MarkdownAdapterFactoryExtension,
-  MixTextAdapterFactoryExtension,
-  NotionHtmlAdapterFactoryExtension,
-  NotionTextAdapterFactoryExtension,
-  PlainTextAdapterFactoryExtension,
-} from '@blocksuite/affine-shared/adapters';
-import { HighlightSelectionExtension } from '@blocksuite/affine-shared/selection';
-import {
-  BlockMetaService,
-  FeatureFlagService,
-  FileSizeLimitService,
-  LinkPreviewerService,
-} from '@blocksuite/affine-shared/services';
-import {
-  BlockSelectionExtension,
-  CursorSelectionExtension,
-  SurfaceSelectionExtension,
-  TextSelectionExtension,
-} from '@blocksuite/std';
-import type { ExtensionType } from '@blocksuite/store';
+import { AttachmentStoreExtension } from '@blocksuite/affine-block-attachment/store';
+import { BookmarkStoreExtension } from '@blocksuite/affine-block-bookmark/store';
+import { CalloutStoreExtension } from '@blocksuite/affine-block-callout/store';
+import { CodeStoreExtension } from '@blocksuite/affine-block-code/store';
+import { DataViewStoreExtension } from '@blocksuite/affine-block-data-view/store';
+import { DatabaseStoreExtension } from '@blocksuite/affine-block-database/store';
+import { DividerStoreExtension } from '@blocksuite/affine-block-divider/store';
+import { EdgelessTextStoreExtension } from '@blocksuite/affine-block-edgeless-text/store';
+import { EmbedStoreExtension } from '@blocksuite/affine-block-embed/store';
+import { FrameStoreExtension } from '@blocksuite/affine-block-frame/store';
+import { ImageStoreExtension } from '@blocksuite/affine-block-image/store';
+import { LatexStoreExtension } from '@blocksuite/affine-block-latex/store';
+import { ListStoreExtension } from '@blocksuite/affine-block-list/store';
+import { NoteStoreExtension } from '@blocksuite/affine-block-note/store';
+import { ParagraphStoreExtension } from '@blocksuite/affine-block-paragraph/store';
+import { SurfaceRefStoreExtension } from '@blocksuite/affine-block-surface-ref/store';
+import { TableStoreExtension } from '@blocksuite/affine-block-table/store';
+import { FootnoteStoreExtension } from '@blocksuite/affine-inline-footnote/store';
+import { LatexStoreExtension as InlineLatexStoreExtension } from '@blocksuite/affine-inline-latex/store';
+import { LinkStoreExtension } from '@blocksuite/affine-inline-link/store';
+import { ReferenceStoreExtension } from '@blocksuite/affine-inline-reference/store';
 
-function getAdapterFactoryExtensions(): ExtensionType[] {
+import { MigratingStoreExtension } from './migrating-store';
+
+export function getInternalStoreExtensions() {
   return [
-    MarkdownAdapterFactoryExtension,
-    PlainTextAdapterFactoryExtension,
-    HtmlAdapterFactoryExtension,
-    NotionTextAdapterFactoryExtension,
-    NotionHtmlAdapterFactoryExtension,
-    MixTextAdapterFactoryExtension,
+    AttachmentStoreExtension,
+    BookmarkStoreExtension,
+    CalloutStoreExtension,
+    CodeStoreExtension,
+    DataViewStoreExtension,
+    DatabaseStoreExtension,
+    DividerStoreExtension,
+    EdgelessTextStoreExtension,
+    EmbedStoreExtension,
+    FrameStoreExtension,
+    ImageStoreExtension,
+    LatexStoreExtension,
+    ListStoreExtension,
+    NoteStoreExtension,
+    ParagraphStoreExtension,
+    SurfaceRefStoreExtension,
+    TableStoreExtension,
+
+    FootnoteStoreExtension,
+    LinkStoreExtension,
+    ReferenceStoreExtension,
+    InlineLatexStoreExtension,
+
+    MigratingStoreExtension,
   ];
 }
-
-const defaultBlockHtmlAdapterMatchers = [RootBlockHtmlAdapterExtension];
-
-const defaultBlockMarkdownAdapterMatchers = [RootBlockMarkdownAdapterExtension];
-
-const defaultBlockNotionHtmlAdapterMatchers: ExtensionType[] = [
-  RootBlockNotionHtmlAdapterExtension,
-];
-
-function getHtmlAdapterExtensions(): ExtensionType[] {
-  return [
-    ...HtmlInlineToDeltaAdapterExtensions,
-    ...defaultBlockHtmlAdapterMatchers,
-    ...InlineDeltaToHtmlAdapterExtensions,
-  ];
-}
-
-function getMarkdownAdapterExtensions(): ExtensionType[] {
-  return [
-    ...MarkdownInlineToDeltaAdapterExtensions,
-    ...defaultBlockMarkdownAdapterMatchers,
-    ...InlineDeltaToMarkdownAdapterExtensions,
-  ];
-}
-
-function getNotionHtmlAdapterExtensions(): ExtensionType[] {
-  return [
-    ...NotionHtmlInlineToDeltaAdapterExtensions,
-    ...defaultBlockNotionHtmlAdapterMatchers,
-  ];
-}
-
-function getPlainTextAdapterExtensions(): ExtensionType[] {
-  return [...InlineDeltaToPlainTextAdapterExtensions];
-}
-
-const MigratingStoreExtensions: ExtensionType[] = [
-  RootBlockSchemaExtension,
-  SurfaceBlockSchemaExtension,
-  TranscriptionBlockSchemaExtension,
-
-  BlockSelectionExtension,
-  TextSelectionExtension,
-  SurfaceSelectionExtension,
-  CursorSelectionExtension,
-  HighlightSelectionExtension,
-  DatabaseSelectionExtension,
-
-  getHtmlAdapterExtensions(),
-  getMarkdownAdapterExtensions(),
-  getNotionHtmlAdapterExtensions(),
-  getPlainTextAdapterExtensions(),
-  getAdapterFactoryExtensions(),
-
-  FeatureFlagService,
-  LinkPreviewerService,
-  FileSizeLimitService,
-  BlockMetaService,
-].flat();
-
-export class MigratingStoreExtension extends StoreExtensionProvider {
-  override name = 'migrating';
-
-  override setup(context: StoreExtensionContext) {
-    super.setup(context);
-    context.register(MigratingStoreExtensions);
-  }
-}

blocksuite/affine/all/src/extensions/view.ts

@@ -1,42 +1,56 @@
-import {
-  type ViewExtensionContext,
-  ViewExtensionProvider,
-} from '@blocksuite/affine-ext-loader';
+import { AttachmentViewExtension } from '@blocksuite/affine-block-attachment/view';
+import { BookmarkViewExtension } from '@blocksuite/affine-block-bookmark/view';
+import { CalloutViewExtension } from '@blocksuite/affine-block-callout/view';
+import { CodeBlockViewExtension } from '@blocksuite/affine-block-code/view';
+import { DataViewViewExtension } from '@blocksuite/affine-block-data-view/view';
+import { DatabaseViewExtension } from '@blocksuite/affine-block-database/view';
+import { DividerViewExtension } from '@blocksuite/affine-block-divider/view';
+import { EdgelessTextViewExtension } from '@blocksuite/affine-block-edgeless-text/view';
+import { EmbedViewExtension } from '@blocksuite/affine-block-embed/view';
+import { FrameViewExtension } from '@blocksuite/affine-block-frame/view';
+import { ImageViewExtension } from '@blocksuite/affine-block-image/view';
+import { LatexViewExtension } from '@blocksuite/affine-block-latex/view';
+import { ListViewExtension } from '@blocksuite/affine-block-list/view';
+import { NoteViewExtension } from '@blocksuite/affine-block-note/view';
+import { ParagraphViewExtension } from '@blocksuite/affine-block-paragraph/view';
+import { SurfaceRefViewExtension } from '@blocksuite/affine-block-surface-ref/view';
+import { TableViewExtension } from '@blocksuite/affine-block-table/view';
+import { FootnoteViewExtension } from '@blocksuite/affine-inline-footnote/view';
+import { LatexViewExtension as InlineLatexViewExtension } from '@blocksuite/affine-inline-latex/view';
+import { LinkViewExtension } from '@blocksuite/affine-inline-link/view';
+import { MentionViewExtension } from '@blocksuite/affine-inline-mention/view';
+import { ReferenceViewExtension } from '@blocksuite/affine-inline-reference/view';
 
-import { effects } from './effects';
-import {
-  MigratingEdgelessEditorBlockSpecs,
-  MigratingPageEditorBlockSpecs,
-  MigratingPreviewEdgelessEditorBlockSpecs,
-  MigratingPreviewPageEditorBlockSpecs,
-} from './migrating';
+import { MigratingViewExtension } from './migrating-view';
 
-export class MigratingViewExtension extends ViewExtensionProvider {
-  override name = 'migrating';
+export function getInternalViewExtensions() {
+  return [
+    MigratingViewExtension,
 
-  override effect() {
-    super.effect();
-    effects();
-  }
+    // Block
+    AttachmentViewExtension,
+    BookmarkViewExtension,
+    CalloutViewExtension,
+    CodeBlockViewExtension,
+    DataViewViewExtension,
+    DatabaseViewExtension,
+    DividerViewExtension,
+    EdgelessTextViewExtension,
+    EmbedViewExtension,
+    FrameViewExtension,
+    ImageViewExtension,
+    LatexViewExtension,
+    ListViewExtension,
+    NoteViewExtension,
+    ParagraphViewExtension,
+    SurfaceRefViewExtension,
+    TableViewExtension,
 
-  override setup(context: ViewExtensionContext) {
-    super.setup(context);
-    const scope = context.scope;
-    if (scope === 'preview-page') {
-      context.register(MigratingPreviewPageEditorBlockSpecs);
-      return;
-    }
-    if (scope === 'preview-edgeless') {
-      context.register(MigratingPreviewEdgelessEditorBlockSpecs);
-      return;
-    }
-    if (scope === 'page' || scope === 'mobile-page') {
-      context.register(MigratingPageEditorBlockSpecs);
-      return;
-    }
-    if (scope === 'edgeless' || scope === 'mobile-edgeless') {
-      context.register(MigratingEdgelessEditorBlockSpecs);
-      return;
-    }
-  }
+    // Inline
+    FootnoteViewExtension,
+    LinkViewExtension,
+    ReferenceViewExtension,
+    InlineLatexViewExtension,
+    MentionViewExtension,
+  ];
 }

blocksuite/affine/all/src/inlines/latex/store.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-inline-latex/store';

blocksuite/affine/all/src/inlines/latex/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-inline-latex/view';

blocksuite/affine/all/src/inlines/mention/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-inline-mention/view';

blocksuite/affine/all/src/inlines/reference/store.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-inline-reference/store';

blocksuite/affine/all/src/inlines/reference/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-inline-reference/view';