1 files changed, 22 insertions, 22 deletions

diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx
index cf157c3a9..b86ba72a0 100644
--- a/src/client/views/nodes/LinkAnchorBox.tsx
+++ b/src/client/views/nodes/LinkAnchorBox.tsx
@@ -1,9 +1,9 @@
-import { action, computed, observable } from 'mobx';
-import { observer } from 'mobx-react';
+import { action, computed, makeObservable } from 'mobx';
+import * as React from 'react';
+import { Utils, emptyFunction, setupMoveUpEvents } from '../../../Utils';
 import { Doc } from '../../../fields/Doc';
 import { NumCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, setupMoveUpEvents, Utils } from '../../../Utils';
 import { DragManager } from '../../util/DragManager';
 import { LinkFollower } from '../../util/LinkFollower';
 import { SelectionManager } from '../../util/SelectionManager';
@@ -11,11 +11,8 @@ import { ViewBoxBaseComponent } from '../DocComponent';
 import { StyleProp } from '../StyleProvider';
 import { FieldView, FieldViewProps } from './FieldView';
 import './LinkAnchorBox.scss';
-import { LinkDocPreview } from './LinkDocPreview';
-import React = require('react');
-import globalCssVariables = require('../global/globalCssVariables.scss');
-
-@observer
+import { LinkInfo } from './LinkDocPreview';
+const { default: { MEDIUM_GRAY }, } = require('../global/globalCssVariables.module.scss'); // prettier-ignore
 export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(LinkAnchorBox, fieldKey);
@@ -25,21 +22,24 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
     _ref = React.createRef<HTMLDivElement>();
     _isOpen = false;
     _timeout: NodeJS.Timeout | undefined;
-    @observable _x = 0;
-    @observable _y = 0;
+
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
 
     componentDidMount() {
-        this.props.setContentView?.(this);
+        this._props.setContentView?.(this);
     }
 
     @computed get linkSource() {
-        return this.props.docViewPath()[this.props.docViewPath().length - 2].Document; // this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.LinkSource);
+        return this._props.docViewPath()[this._props.docViewPath().length - 2].Document; // this._props.styleProvider?.(this.dataDoc, this._props, StyleProp.LinkSource);
     }
 
     onPointerDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, (e, doubleTap) => {
             if (doubleTap) LinkFollower.FollowLink(this.Document, this.linkSource, false);
-            else this.props.select(false);
+            else this._props.select(false);
         });
     };
     onPointerMove = action((e: PointerEvent, down: number[], delta: number[]) => {
@@ -67,26 +67,26 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     render() {
         TraceMobx();
-        const small = this.props.PanelWidth() <= 1; // this happens when rendered in a treeView
+        const small = this._props.PanelWidth() <= 1; // this happens when rendered in a treeView
         const x = NumCast(this.layoutDoc[this.fieldKey + '_x'], 100);
         const y = NumCast(this.layoutDoc[this.fieldKey + '_y'], 100);
-        const background = this.props.styleProvider?.(this.dataDoc, this.props, StyleProp.BackgroundColor + ':anchor');
+        const background = this._props.styleProvider?.(this.dataDoc, this._props, StyleProp.BackgroundColor + ':anchor');
         const anchor = this.fieldKey === 'link_anchor_1' ? 'link_anchor_2' : 'link_anchor_1';
         const anchorScale = !this.dataDoc[this.fieldKey + '_useSmallAnchor'] && (x === 0 || x === 100 || y === 0 || y === 100) ? 1 : 0.25;
         const targetTitle = StrCast((this.dataDoc[anchor] as Doc)?.title);
-        const selView = SelectionManager.Views().lastElement()?.props.LayoutTemplateString?.includes('link_anchor_1')
+        const selView = SelectionManager.Views.lastElement()?._props.LayoutTemplateString?.includes('link_anchor_1')
             ? 'link_anchor_1'
-            : SelectionManager.Views().lastElement()?.props.LayoutTemplateString?.includes('link_anchor_2')
-            ? 'link_anchor_2'
-            : '';
+            : SelectionManager.Views.lastElement()?._props.LayoutTemplateString?.includes('link_anchor_2')
+              ? 'link_anchor_2'
+              : '';
         return (
             <div
                 ref={this._ref}
                 title={targetTitle}
                 className={`linkAnchorBox-cont${small ? '-small' : ''}`}
                 onPointerEnter={e =>
-                    LinkDocPreview.SetLinkInfo({
-                        docProps: this.props,
+                    LinkInfo.SetLinkInfo({
+                        docProps: this._props,
                         linkSrc: this.linkSource,
                         linkDoc: this.Document,
                         showHeader: true,
@@ -97,7 +97,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 onPointerDown={this.onPointerDown}
                 onContextMenu={this.specificContextMenu}
                 style={{
-                    border: selView && this.dataDoc[selView] === this.dataDoc[this.fieldKey] ? `solid ${globalCssVariables.MEDIUM_GRAY} 2px` : undefined,
+                    border: selView && this.dataDoc[selView] === this.dataDoc[this.fieldKey] ? `solid ${MEDIUM_GRAY} 2px` : undefined,
                     background,
                     left: `calc(${x}% - ${small ? 2.5 : 7.5}px)`,
                     top: `calc(${y}% - ${small ? 2.5 : 7.5}px)`,