added tutorial tool, still need to integrate with metadatatool

1 files changed, 9 insertions, 13 deletions

diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index e7a10cc29..5603786f0 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import * as WebRequest from 'web-request';
 import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, DivHeight, getWordAtPoint, lightOrDark, returnFalse, returnOne, returnZero, setupMoveUpEvents, smoothScroll } from '../../../ClientUtils';
-import { Doc, DocListCast, Field, FieldType, Opt } from '../../../fields/Doc';
+import { Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { HtmlField } from '../../../fields/HtmlField';
 import { InkTool } from '../../../fields/InkField';
@@ -54,7 +54,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
     public static openSidebarWidth = 250;
     public static sidebarResizerWidth = 5;
-    static webStyleSheet = addStyleSheet();
+    static webStyleSheet = addStyleSheet().sheet;
     private _setPreviewCursor: undefined | ((x: number, y: number, drag: boolean, hide: boolean, doc: Opt<Doc>) => void);
     private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
     private _outerRef: React.RefObject<HTMLDivElement> = React.createRef();
@@ -645,8 +645,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     forward = (checkAvailable?: boolean) => {
-        const future = Cast(this.dataDoc[this.fieldKey + '_future'], listSpec('string'), []);
-        const history = Cast(this.dataDoc[this.fieldKey + '_history'], listSpec('string'), []);
+        const future = StrListCast(this.dataDoc[this.fieldKey + '_future']);
+        const history = StrListCast(this.dataDoc[this.fieldKey + '_history']);
         if (checkAvailable) return future.length;
         runInAction(() => {
             if (future.length) {
@@ -672,23 +672,19 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     back = (checkAvailable?: boolean) => {
-        const future = Cast(this.dataDoc[this.fieldKey + '_future'], listSpec('string'));
-        const history = Cast(this.dataDoc[this.fieldKey + '_history'], listSpec('string'), []);
+        const future = StrListCast(this.dataDoc[this.fieldKey + '_future']);
+        const history = StrListCast(this.dataDoc[this.fieldKey + '_history']);
         if (checkAvailable) return history.length;
         runInAction(() => {
             if (history.length) {
                 const curUrl = this._url;
-                if (future === undefined) this.dataDoc[this.fieldKey + '_future'] = new List<string>([this._url]);
+                if (!future.length) this.dataDoc[this.fieldKey + '_future'] = new List<string>([this._url]);
                 else this.dataDoc[this.fieldKey + '_future'] = new List<string>([...future, this._url]);
                 this.dataDoc[this.fieldKey] = new WebField(new URL(history.pop()!));
                 this._scrollHeight = 0;
                 if (this._webUrl === this._url) {
                     this._webUrl = curUrl;
-                    setTimeout(
-                        action(() => {
-                            this._webUrl = this._url;
-                        })
-                    );
+                    setTimeout(action(() => (this._webUrl = this._url)));
                 } else {
                     this._webUrl = this._url;
                 }
@@ -1220,7 +1216,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                         {...this._props}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
                         fieldKey={this.fieldKey + '_' + this._urlHash}
-                        Document={this.Document}
+                        Doc={this.Document}
                         layoutDoc={this.layoutDoc}
                         dataDoc={this.dataDoc}
                         setHeight={emptyFunction}