Documents.ns

Newspeak3
'Root'
class Documents usingPlatform: p ide: webIDE  = (
(*
This module supports the live editing of documents that include rich text and live widgets.

It implements an editor with two views: one view is a text editor on raw HTML, and the second is the same HTML, rendered. The editor is live - every edit causes immediate change in the rendered HTML.

Importantly, the HTML can specify embedded Hopscotch fragments using Ampleforth.  Indeed, the primary purpose here is to facilitate the creation of live documents which include programmed UI elements such as live literate programs. Going further, we expect to create documents that function as full fledged applications. Therefore, the editor must be a complete development environment, and so this module is part of the IDE.

For convenience, we allow direct access all standard fragment construction methods within a document. We also allow easy access to the ide root namespace, even though this tends to runs counter to Newspeak's modularity philosophy. 

Documents have a potentially dual nature: they can be seen as data, or as program (in the case where the document is an application). The program is a player or interpreter of content. 

In the document's persistent representation, we distinguish between a player/interpreter and content, and between a player and its external dependencies.
In general, we distinguish between a document's basic content and its external dependencies.

We want to be able to persist standalone data, which is self describing, and data that is subject to/in need of interpretation by a player.

The former scenario allows us to just deploy something and give a URI for it. The latter avoids bloat and allows a player to share content from multiple sources.

To address these requirements, we can view the world as a nested tree of players and content.

Each level includes the player, its external dependencies, and a content subtree. Concretely, these are zip files

Level 1:

AmpleforthPlayer.vfuel
Dependencies such as CodeMirror, png files etc.
Content (Level 2):
   Telescreen.html (the player. Not every doc is a player, but it can be)
   Dependencies (might not be any in this example, but say Telescreen used a custom icon) 
   Content (Level 3):
      APreso.zip
     Dependencies, such as images, video/audio, classes and transcluded documents (each constituting its own subdirectory at level 4) 

In principle, level 0 would use primordialsoup.(html, js, wasm) as player, and the vfuel as content,
but the VM is set to take the content as an explicit parameter.

At level -1 the player is the web browser, and psoup is the content. Indeed, we face this issue when we choose between a web site (which has psoup set up to interpret content) and using Electron, where we have a complete standalone set up. And the OS is the player at level -2, with the web browser as content.

Now we have the choice of packaging player alone, content alone, or combining them.

Saving, in the traditional sense, saves content (and its dependencies), in a zip file. Deploying saves a zip file with the player and the content. If the content is itself a player (say, a doc that is an app, like Telescreen) and we save, we get the application/player, which can then be used to load content saved from multiple sources. In contrast, deployment saves content and its player as a standalone unit.

Content could of course include multiple units (say, a list of presentations). Each player knows how to interpret content. Content might come with an external resource to guide it (say, a class with code).
*)
    |	
    private Map = p collections Map.
    private List = p collections List.
    private Set = p collections Set.
    private Subject = p hopscotch Subject.
    private Presenter = p hopscotch Presenter.
    private DOMParser = p hopscotch DOMParser.
    private ClassMirror = p mirrors ClassMirror.    
    private ObjectMirror = p mirrors ObjectMirror.
    private Color = p graphics Color.
    private ProgrammingPresenter = webIDE browsing ProgrammingPresenter.
    private NamespaceSubject = webIDE browsing NamespaceSubject.
    private DefinitionTemplate = webIDE browsing DefinitionTemplate.
    private ObjectSubject = webIDE browsing ObjectSubject.
    private ClassSubject = webIDE browsing ClassSubject.
    private ClassModel = webIDE browsing ClassModel.
    private MethodSubject = webIDE browsing MethodSubject.
    private ThreadSubject = webIDE debugging ThreadSubject.    
    private Root = webIDE namespacing Root.
    private JSObject = p js global at: 'Object'.
    private JSArray = p js global at: 'Array'.
    private JSPromise = p js global at: 'Promise'.
    private JSString = p js global at: 'String'.
    private JSZip = p js global at: 'JSZip'.
    private URL = p js global at: 'URL'.

    private ide = webIDE.
    private retainedPlatform = p.
    parser = retainedPlatform mirrors compiler parser.
  |
  webIDE browsing addObjectViews: {DocumentPresenter} forKind: 'isKindOfDocument'.
) (
public class TwoViewEditorSubject onModel: m <Document> = Subject onModel: m (
  | public isAmpleforth <Boolean> ::= true. |
) (
isMyKind: f <Fragment> ^ <Boolean> = (
  ^f isKindOfTwoViewEditorSubject
)
public isKindOfTwoViewEditorSubject ^ <Boolean> = (
  ^true
)
public document ^ <Document> = (
  ^model
)
public setText: s <String> = (
  document contents: s
)
public text ^ <String> = (
  ^document contents
)
public name ^ <String> = (
  ^document name
)
public createPresenter ^ <Presenter>  = (
  ^TwoViewEditorPresenter onDocumentSubject: self
)
public parseDefinition: src <String> ^ <AST> 
  = (
   ^[parser parseLazySlotDeclaration: src] on: Error do: [:els |
       [parser parseClassDeclaration: src] on: Error do: [:ecd |
          [parser parseMethodDeclaration: src] on: Error do: [:ecm |
              Error signal: 'Expected a lazy slot, class or method declaration'
          ]
       ]
   ]
)
) : (
public named: n <String> initialContents: s <String> = (
  ^onModel: (Document named: n contents: s)
)
)
public class TwoViewEditorPresenter onDocumentSubject: s <TwoViewEditorSubject> = Presenter onSubject: s (
  |
  public mapping <Map[Symbol, Fragment]> = Map new at: 'AmpleforthTargetDocument' put: subject document; yourself.    
  rendered <HolderComposer> = holder: render. 
  (* Is the user editing the live view? *)
  updatingFromLive <Boolean> ::= false.
  (* Did the user just paste into the live view? *)  
  pasting <Boolean> ::= false.
  cm <CodeMirrorFragment>  
  rawViewToggle <ToggleComposer>
  |
) (
public isKindOfTwoViewEditorPresenter ^ <Boolean> = (
  ^true
)
isMyKind: f <Fragment> ^ <Boolean> = (
  ^f isKindOfTwoViewEditorPresenter
)
updateFromRawView = (
  (* Recompute the live view using #render and update the holder *)
  rendered content: render.
  (* Add an update handler to the new live view. *)
  addUpdateHandler
)
updateVisualsFromSameKind: oldPresenter <Self> ^ <Alien[Element]> = (
  | result <Alien[Element]> = super updateVisualsFromSameKind: oldPresenter. |
  addUpdateHandler.
  ^result
)
updater = (
  ^[
    (* Note that the live view was edited *)
    updatingFromLive: true.  
    (* Update the raw view based on the live view *)
    cm text: scrubbedLiveViewSource. 
    nil]
)
addUpdateHandler   = (
  (* Add an update handler to the new live view. *)
  (rendered content visual at: #firstChild) at: #updateRawHTML put: updater;
    at: #onpaste put: [:e <Alien[ClipboardEvent]> | 
       (* note that a paste is happening; the view processing
           will happen later, and rely on this *)
        pasting:: true.
        nil
      ]
)
jsDocument = (
  ^retainedPlatform js global at: #document
)
ampletErrorMessage: ampletName <String> ^ <Alien[Element]> = (
  | amplet <Alien[Element]> = jsDocument createElement: 'div'. |
  amplet 
    at: #className put: 'ampleforthError';
    at: #innerText put: ampletName, ' is not a valid amplet name. It must be a legal Newspeak unary selector. ';
    at: #style put: 'color: red; font-weight: bold';
    at: #contentEditable put: 'false'.
  ^amplet
)
ampletNamed: n <String> ^ <Alien[Element]> = (
  ^' <div class = "ampleforth" name = "', n, '" contenteditable = "false"> </div> '
)
render ^ <AmpleforthFragment> = (
  | result <AmpleforthFragment> = subject isAmpleforth ifTrue: [ampleforth: subject text mapping: mapping] ifFalse: [html: subject text]. |
  ^result
)
public toggleRawView = (
  rawViewToggle toggle
)
scrubbedLiveViewSource ^ <String> = (
(* The live view's innerHTML contains the HTML sources for the live widgets added into it.
     Before we use this to set the raw view source, these must be eliminated. They not only
     pollute the model, but can lead to duplicate widgets as well.
     *)
  |
  treeCopy = rendered visual cloneNode: true.
  amplets <Alien[HTMLCollection[Node]]> = treeCopy getElementsByClassName: #ampleforth. |
  0 to: (amplets at: #length) - 1 do: [:i <Integer> | | amplet <Alien[Node]> = amplets item: i. |
  amplet isNil ifFalse: [amplet hasChildNodes ifTrue: [amplet removeChild: (amplet at: #firstChild)]]
  ].
  ^treeCopy at: #innerHTML
)
public rawEditor = (
  ^cm
)
acceptNewLinkFrom: template = (
  | styled = template visual at: #parentNode. |
  styled at: #href put: template text. 
  styled at: #contentEditable put: #false. 
  styled removeChild: template
)
public respondToMakeAmplet = (
  makeAmplet: [:ampletName | ampletName]
)
public respondToMakeLink = (
  makeAmplet: [:ampletName <String> | 'htmlLink: ''', ampletName, ''''].
)
public makeAmplet: ampletGenerator <[:String | String]> = (
(*Takes a closure, ampletGenerator, that takes the  text and returns a Newspeak expression. The closure is fed the selected text, and the resulting expression defines the name attribute of an HTML amplet definition using the method #ampletNamed:. This will be used to compute a Hopscotch fragment whose visual will be inserted in the DOM in place of the selection. *)
  (* Extract the text from the selection *)
  | 
  jsDoc <Alien[Document]> =  retainedPlatform js global at: #document.
  selection <Alien[Selection]> = jsDoc getSelection.
  ampletName <String> = selection toString.
  amplet = jsDoc createElement: 'div'.
  s2
  range
  |
  (* No selection. We might warn about this *)
  (selection at: #type) = #Range ifFalse: [^self]. 
  (* Remove the selection *)
  selection deleteFromDocument.
  s2:: (retainedPlatform js global at: #document) getSelection.
  range:: s2 getRangeAt: 0.
  range insertNode: amplet.
  (* compute the amplet using ampletGenerator and set its HTML definition accordingly *)
  amplet at: #outerHTML  put: ( ampletNamed: (ampletGenerator value: ampletName)).
  (* force an update of the live view; this will update the raw view to include the changes *)
  updater value.
  subject setText: scrubbedLiveViewSource.
  (* Then force a re-rendering based on the updated raw view to activate the amplet*)
  updateFromRawView
)
definition ^ <Fragment> = (
| docWidth <Integer> = ((jsDocument at: #body) at: #clientWidth). |
  cm:: codeMirror: subject text.
  updateFromRawView.
  cm useEditControls: false.
  cm 
    changeResponse: [:ed <CodeMirrorFragment> :event <Event>  | 
    subject setText: ed textBeingAccepted. 
    (updatingFromLive and: [pasting not])
      ifTrue: [(* Reset updatingFromLive, in case the user edits the raw view next;
                        The live view's handler(s) will programmatically update the rest *)
        updatingFromLive: false
        ]  ifFalse: [ (* set pasting back to its default, in case it was true *)
        updatingFromLive: false.
        pasting:: false.
        (* The change is a result of editing the raw view by the user; update accordingly *)
        updateFromRawView
      ].
    ]; 
    acceptResponse: [:ed <CodeMirrorFragment> :event <Event>  | updateGUI: [subject setText: ed textBeingAccepted]].
    (cm visual at: #style) at: 'width' put: docWidth//2;  at: 'max-width' put: docWidth//2; at: 'min-width' put: 200.
    rawViewToggle:: collapsed: [nothing] expanded: [cm visual. cm editor setSize: '40em'. cm].
    ^row: { 
        rawViewToggle.
        rendered
        }
)
public respondToDefineMethod = (
  | 
  jsDoc <Alien[Document]> =  retainedPlatform js global at: #document.
  selection <Alien[Selection]> = jsDoc getSelection.
  ampletName <String> = selection toString.
  |
  updateGUI: [subject document addMethodFromSource: ampletName]
)
public respondToDefineNestedClass = (
  | 
  jsDoc <Alien[Document]> =  retainedPlatform js global at: #document.
  selection <Alien[Selection]> = jsDoc getSelection.
  ampletName <String> = selection toString.
  |
  updateGUI: [subject document addClassFromSource: ampletName]
)
public respondToDefineLazySlot = (
  | 
  jsDoc <Alien[Document]> =  retainedPlatform js global at: #document.
  selection <Alien[Selection]> = jsDoc getSelection.
  ampletName <String> = selection toString.
  |
  updateGUI: [subject document addLazySlotFromSource: ampletName]
)
public respondToShowIt = (
  makeAmplet: [:ampletName <String> | 'label: (evaluate: ''', ampletName withoutNbsp, ''') result reflectee printString']
)
public respondToMakeButton = (
  makeAmplet: [:ampletName <String> | 'button:''', ampletName withoutNbsp, '''action:[updateGUI:[', ampletName withoutNbsp, ']]']
)
public respondToDefineIt = (
  | 
  jsDoc <Alien[Document]> =  retainedPlatform js global at: #document.
  selection <Alien[Selection]> = jsDoc getSelection.
  src <String> = selection toString.
  ast = subject parseDefinition: src.
  |
  updateGUI: [
     subject document addDefinitionFor: ast from: src.  
  ]
)
removeTag: name <String> fromElement: element <Alien[Element]> = (
  (* Remove all elements with a given tag name from an element. *)
  onChildrenOf: element do: [ :e | removeTag: name fromElement: e. ].
  (element at: #nodeName) = name ifTrue: [ replaceElementWithChildren: element ].
)
public respondToMakeBold = (
  respondToMake: 'B'
)
replaceElementWithChildren: element <Alien[Element]> = (
  | 
  parent <Alien[Element]> = element at: #parentNode.
  children <Alien[NodeList]> = element at: #childNodes.
  |
  [ (children at: #length) > 0 ] whileTrue: [ parent insertBefore: (children at: 0) before: element. ].
  parent removeChild: element.
)
isElement: element <Alien[Element]> entirelyMadeOf: tagName <String> = (
  (* Empty text nodes don't count, but finding a non-empty text node that isn't covered in tagName does count *)
  (element at: #nodeName) = '#text' ifTrue: [^(element at: #nodeValue) = ''].
  (element at: #nodeName) = tagName ifTrue: [^true].
  onChildrenOf: element do: [ :e | (isElement: e entirelyMadeOf: tagName) ifFalse: [^false]. ].
  ^true.
)
public respondToMakeItalic = (
  respondToMake: 'I'
)
public respondToUnderline = (
  respondToMake: 'U'
)
onChildrenOf: e <Alien[Element]> do: block <[:Alien[Element]]> = (
  |
  jsChildren <Alien[NodeList]> = e at: #childNodes.
  children = Array new: (jsChildren at: #length).
  |
  0 to: (jsChildren at: #length) - 1 do: [ :i | children at: (i + 1) put: (jsChildren at: i) ].
  children do: block
)
public respondToMakeSuperscript = (
  respondToMake: 'SUP'
)
public respondToMakeSubscript = (
  respondToMake: 'SUB'
)
public replaceSelectionUsing: fos <[:Alien[Selection]]> = (
  (* Replace the selection with the result of invoking fos; fos is a function of the selection, which we pass into it so it can compute the replacement *)
  | 
  jsDoc <Alien[Document]> =  retainedPlatform js global at: #document.
  selection <Alien[Selection]> = jsDoc getSelection.
  replacement <Alien[Element]>
  selectionPostRemoval <Alien[Selection]>
  range <Alien[Range]>
  |
  (* No selection. We might warn about this *)
  (selection at: #type) = #None ifTrue: [^self].
  (* compute replacement value based on selection *)
  replacement:: fos value: selection.
    (* Remove the selection. This must be done after computing the replacement. Otherwise, the seelction is garbage by the time fos sees it *)
  selection deleteFromDocument.
  selectionPostRemoval:: (retainedPlatform js global at: #document) getSelection.
  range:: selectionPostRemoval getRangeAt: 0.
  range insertNode: replacement.
  (* force an update of the live view; this will update the raw view to include the changes *)  
  updater value.
  subject setText: scrubbedLiveViewSource.
  (* Then force a re-rendering based on the updated raw view to activate the amplet*)
  updateFromRawView
)
cleanUpElement: e <Alien[Element]> = (
  |
  nodeName <String> = e at: #nodeName.
  previous <Alien[Element]> = e at: #previousSibling.
  |
  (* Don't touch elements we don't create *)
  ({'B'. 'I'. 'U'. 'SUP'. 'SUB'. 'OL'. 'UL'} indexOf: nodeName) > 0 ifTrue: [
    (* Remove empty text children *)
    e normalize.
    (* Remove empty nodes *)
    (e at: #firstChild) = nil ifTrue: [ e remove. ^self ].
    (* Merge adjacent nodes *)
    previous = nil ifFalse: [
      nodeName = (previous at: #nodeName) ifTrue: [
        [ (e at: #firstChild) = nil ] whileFalse: [ previous appendChild: (e at: #firstChild) ].
        e remove
      ]
    ]
   ].
   onChildrenOf: e do: [ :e | cleanUpElement: e ]
)
isElement: e <Alien[Element]> enclosedIn: tagName <String> = (
  ^(element: e enclosedIn: tagName) isNil not.
)
updateAfterEdit = (
  (* force an update of the live view; this will update the raw view to include the changes *)
  updater value.
  subject setText: scrubbedLiveViewSource.
  (* Then force a re-rendering based on the updated raw view to activate the amplet*)
  updateFromRawView
)
public respondToMake: nodeType <String> = (
   |
   jsDoc <Alien[Document]> = retainedPlatform js global at: #document.
   range <Alien[Range]> = jsDoc getSelection getRangeAt: 0.
   contents <Alien[Element]> = jsDoc createElement: #span.
   |
   contents appendChild: range extractContents.
   (isElement: (range at: #commonAncestorContainer) enclosedIn: nodeType) ifTrue: [
     (* Peel enclosing nodeType *)
     removeTag: nodeType fromElement: contents.
     range insertNode: contents.
     cleanUpElement: (peelTag: nodeType fromElement: contents).
     replaceElementWithChildren: contents.
   ] ifFalse: [
     | parent <Alien[Element]> |
     (* Nothing to peel, but remove nodeType from inside *)
     (isElement: contents entirelyMadeOf: nodeType) ifTrue: [
       removeTag: nodeType fromElement: contents.
       range insertNode: contents.
       parent:: contents at: #parentNode.
       replaceElementWithChildren: contents.
       cleanUpElement: parent.
     ] ifFalse: [
       (* Add nodeType *)
       | styled <Alien[Element]> = jsDoc createElement: nodeType. |
       removeTag: nodeType fromElement: contents.
       styled appendChild: contents.
       range insertNode: styled.
       replaceElementWithChildren: contents.
       cleanUpElement: (styled at: #parentNode).
     ].
   ].
  updateAfterEdit
)
extendSelectionToLine: selection = (
  (selection at: #type) = #Caret ifTrue: [
    selection modify: 'move' direction: 'backward' granularity: 'lineboundary'.
    selection modify: 'extend' direction: 'forward' granularity: 'lineboundary'.
  ].
  ^selection
)
public respondToMakeList = (
(* Insert a ul containing a li node containing the original selection  *)
  respondToMakeList: 'UL'
)
public respondToMakeOrderedList = (
(* Insert an ol containing a li node containg the original selection  *)
  respondToMakeList: 'OL'
)
changeElementTag: e <Alien[Element]> to: type <String> = (
  |
  parent <Alien[Element]> = e at: #parentNode.
  replacement <Alien[Element]> = (retainedPlatform js global at: #document) createElement: type.
  |
  parent insertBefore: replacement before: e.
  [ (e at: #firstChild) = nil ] whileFalse: [ replacement appendChild: (e at: #firstChild) ].
  e remove.
)
element: element <Alien[Element]> contains: tagName <String> = (
  (element at: #nodeName) = tagName ifTrue: [^element].
  onChildrenOf: element do: [ :e |
    | result = element: e contains: tagName. |
    result isNil ifFalse: [^result]
  ].
  ^nil
)
peelTag: name <String> fromElement: element <Alien[Element]> = (
  | cursor <Alien[Element]> ::= element. grandparent <Alien[Element]> |
  [
    |
    parent <Alien[Element]> = cursor at: #parentNode.
    grandparent <Alien[Element]> = parent at: #parentNode.
    right <Alien[Element]> = parent cloneNode: false.
    |
    grandparent insertBefore: right before: (parent at: #nextSibling).
    (* Give the nodes after the element a new parent. *)
    [ (cursor at: #nextSibling) = nil ] whileFalse: [ right appendChild: (cursor at: #nextSibling) ].
    (parent at: #nodeName) = name ifTrue: [
      (* We hit the tag we want to peel off. *)
      grandparent insertBefore: cursor before: right.
      right hasChildNodes ifFalse: [ right remove ].
      parent hasChildNodes ifFalse: [ parent remove ].
      ^grandparent.
    ] ifFalse: [
      (* Give the cursor its own parent, turning one parent into three. *)
      | middle <Alien[Element]> = parent cloneNode: false. |
      grandparent insertBefore: middle before: right.
      middle appendChild: cursor.
      right hasChildNodes ifFalse: [ right remove ].
      parent hasChildNodes ifFalse: [ parent remove ].
      cursor:: middle.
    ]
  ] repeat.
)
addElementsIn: element <Alien[Element]> inRange: range <Alien[Range]> toList: list <List[Alien[Element]]> when: b <[:Alien[Element] | Boolean]> = (
  (b value: element) ifTrue: [
    (range intersectsNode: element) ifTrue: [ list add: element ]
  ] ifFalse: [
    onChildrenOf: element do: [ :e | addElementsIn: e inRange: range toList: list when: b ]
  ]
)
addElementsIn: element <Alien[Element]> toList: list <List[Alien[Element]]> when: b <[:Alien[Element] | Boolean]> = (
  (b value: element) ifTrue: [
    list add: element
  ] ifFalse: [
    onChildrenOf: element do: [ :e | addElementsIn: e toList: list when: b ]
  ]
)
public respondToMakeList: nodeType <String> = (
(* Insert a list node containing a li node containing the original selection.
    It is the caller's reponsibility to pass in a valid list nodeType (either UL or OL).
*)
  |
  jsDoc <Alien[Document]> = retainedPlatform js global at: #document.
  range <Alien[Range]> = (extendSelectionToLine: jsDoc getSelection) getRangeAt: 0.
  otherNodeType <String> = nodeType = 'UL' ifTrue: [ 'OL' ] ifFalse: [ 'UL' ].
  worked <Boolean> ::= false.
  |
  (* Remove intersecting LIs in intersecting lists of the same type *)
  (elementsIntersecting: range withTag: nodeType) do: [ :list |
    |
    parent <Alien[Element]> = list at: #parentNode.
    elements <List[Alien[Element]]> = elementsIn: list withTag: 'LI' inRange: range.
    |
    (* Make a hole in the enclosing list, then move other elements into the hole. *)
    peelTag: nodeType fromElement: (elements at: 1).
    2 to: elements size do: [ :i |
      parent insertBefore: (elements at: i) before: ((elements at: i - 1) at: #nextSibling).
      (* Add <br> between list items *)
      parent insertBefore: (jsDoc createElement: 'br') before: (elements at: i)
    ].
    elements do: [ :e | replaceElementWithChildren: e ].
    cleanUpElement: parent.
    worked:: true.
  ].
  (* The selection intersects a list of the other type, change the type of the list *)
  (elementsIntersecting: range withTag: otherNodeType) do: [ :list |
    changeElementTag: list to: nodeType.
    worked:: true.
  ].
  worked ifTrue: [
    updateAfterEdit
  ] ifFalse: [
    (* Nothing else was appropriate, create a list *)
    replaceSelectionUsing: [ :selection |
      |
      list = jsDoc createElement: nodeType.
      li = jsDoc createElement: 'li'.
      |
      list appendChild: li.
      li appendChild: range extractContents.
      list
    ]
  ]
)
elementsIn: element <Alien[Element]> when: block <[:Alien[Element] | Boolean]> = (
  | l <List[Alien[Element]]> = List new. |
  addElementsIn: element toList: l when: block.
  ^l.
)
elementsIn: element <Alien[Element]> withTag: name <String> inRange: range <Alien[Range]> = (
  ^elementsIn: element when: [ :e | (e at: #nodeName) = name and: [ range intersectsNode: element ] ].
)
elementsIn: element <Alien[Element]> withTag: name <String> = (
  ^elementsIn: element when: [ :e | (e at: #nodeName) = name ]
)
element: element <Alien[Element]> enclosedInParentWhere: block <[:Alien[Element] | Boolean]> = (
  element = nil ifTrue: [^nil].
  (block value: element) ifTrue: [^element].
  ^element: (element at: #parentNode) enclosedInParentWhere: block.
)
public respondToMakeHeading: nodeType <String> = (
(* Insert a heading node containing the original selection.
    It is the caller's reponsibility to pass in a valid heading nodeType (H1 through H6).
*)
  |
  jsDoc <Alien[Document]> = retainedPlatform js global at: #document.
  range <Alien[Range]> = (extendSelectionToLine: jsDoc getSelection) getRangeAt: 0.
  worked <Boolean> ::= false.
  |
  (* Remove intersecting headings of the same type *)
  (elementsIntersecting: range withTag: nodeType) do: [ :heading |
    | parent <Alien[Element]> = heading at: #parentNode. |
    replaceElementWithChildren: heading.
    cleanUpElement: parent.
    worked:: true
  ].
  (* Change the type of intersecting headings of different types *)
  (elementsIntersecting: range when: [ :e | ({'H1'. 'H2'. 'H3'. 'H4'. 'H5'. 'H6'} indexOf: (e at: #nodeName)) > 0 ]) do: [ :heading |
    (heading at: #nodeName) = nodeType ifFalse: [
      changeElementTag: heading to: nodeType.
      worked:: true
    ]
  ].
  worked ifTrue: [
    updateAfterEdit
  ] ifFalse: [
    (* Nothing else was appropriate, create a heading *)
    replaceSelectionUsing: [ :selection |
      | heading = jsDoc createElement: nodeType. |
      heading appendChild: range extractContents.
      heading
    ]
  ]
)
elementsIntersecting: range <Alien[Range]> withTag: name <String> = (
  |
  inside = elementsIn: (range at: #commonAncestorContainer) withTag: name inRange: range.
  outside = element: (range at: #commonAncestorContainer) enclosedIn: name.
  |
  inside size > 0 ifTrue: [ ^inside ].
  outside isNil ifFalse: [ ^{outside} ].
  ^{}.
)
element: element <Alien[Element]> enclosedIn: tagName <String>= (
  ^element: element enclosedInParentWhere: [ :e | (e at: #nodeName) = tagName ]
)
elementsIntersecting: range <Alien[Range]> when: block <[:Alien[Element] | Boolean]> = (
  |
  inside = elementsIn: (range at: #commonAncestorContainer) when: [ :e | (block value: e) and: [ range intersectsNode: e ] ].
  outside = element: (range at: #commonAncestorContainer) enclosedInParentWhere: block.
  |
  inside size > 0 ifTrue: [ ^inside ].
  outside isNil ifFalse: [ ^{outside} ].
  ^{}.
)
public respondToCenter = (
  respondToMake: 'center'
)
public respondToStrikethrough = (
  respondToMake: 's'
)
) : (
public onSubject: os <ObjectSubject> ^ <Instance> = (
  ^onDocumentSubject: (TwoViewEditorSubject onModel: os objectMirror reflectee)
)
)
public class Document named: n <String> contents: s <String> = ProgrammingPresenter onSubject: dummySubject (
(*
A Document provides a context for evaluating Newspeak code, in order to present live Hopscotch fragments within the text. Access to the all the standard fragments is provided by inheriting them from ProgrammingPresenter. This inheritance is done only for that purpose; Document isn't a Presenter! This should be cleaned up. See PrefixPresenter for an example of how to do that.

We also want access to the IDE namespace, in support of literate programming. The #doesNotUnderstand: method provides this access.
Lastly, we implement the  #evaluateFragment: method that allows for evaluating expressions in the context of the Document, for reasons explained below.

By convention, the Document is made available to AmpleforthFragment via the mapping, under the key 'AmpleforthTargetDocument'. This allows AmpleforthFragment to process amplets, DOM nodes containing arbitrary Newspeak code snippets that produce Hopscotch fragments, by evaluating them as message sends to the Document. We use this convention because we don't want Hopscotch to depend on mirrors (most UI applications do not need mirrors as part of the platform) - neither directly or indirectly via Document. Hence Hopscotch, and in particular, AmpleforthFragment, cannot implement such evaluation by itself and must be given the Document instead. We can't give it the mirror, because the mapping must only consist of fragments.

The ampletCache holds stateful subjects the document requires. For example, if we embed an object presenter in a document via an amplet, it's subject holds on to an evaluator of its own, with a list of results etc. If we want this state to be retained as the document recomputes itself, we need to hold on to that subject and not  recompute it when the amplet gets processed. The ampletCache is where we can store this information. This avoids having each document class have specific fields to cache particular amplets. Furthermore, common usages (like embedding a workspace or an object presenter) are supported by convenience methods like #workspaceTagged: etc., which use the ampletCache, relieving the document author from having to deal with the subtleties of caching subjects.
*)
	|
    public name <String> ::= n.
	public contents <String> ::= s.
    public mirror = ObjectMirror reflecting: self.
    ampletCache <Map[String, Subject]> = Map new.
	|
) (
public isKindOfDocument ^ <Boolean> = (
  ^true
)
doesNotUnderstand: message = (
	^Root
		at: message selector
		ifAbsent: [super doesNotUnderstand: message]
)
platform = (
  ^retainedPlatform
)
public evaluate: expr <String> ^ <ThreadMirror> = (
  ^mirror evaluate: expr
)
public isKindOfPresenter ^ <Boolean> = (
  (* we inherit from Presenter for implementation reasons only; just to provide access to all the standard fragment creation methods *)
  ^false
)
public isKindOfProgrammingPresenter ^ <Boolean> = (
  (* we inherit from ProgrammingPresenter for implementation reasons only; just to provide access to all theg standard fragment creation methods *)
  ^false
)
isMyKind: other ^ <Boolean> = (
  ^other isKindOfDocument
)
definition = (
  ^hyperrealError
)
public hash ^ <Integer> = (
  ^ name hash bitXor: contents hash
)
public = other ^ <Boolean> = (
(* We cannot rely on the inherited = from Presenter, as this is really a fake presenter and not displayed directly *)
  ^name = other name and: [contents = other contents]
)
hyperrealError = (
  ^html: '<p style="color:red;"><b>Doubleplus Ungoodness Detected.</b></p>
<p style="color:red;">Document  <i>', name, '</i> is attempting to embed
itself within itself. This would require infinite space<a href = ''#footnote1''><sup>1</sup></a>. The most
likely cause is an <i>ampleforth</i> element referring to a method returning
<b>self</b> (or else, to #AmpleforthTargetDocument). Perhaps you forgot a return?</p>
<p style="color:red;">If you really meant to do this, you need to mediate via a link or
button. Otherwise, the Ministry of Truth recommends <a href = "https://kwarc.info/teaching/TDM/Borges.pdf"><i>On Exactitude in Science</i></a> by Borges.</p>
<p id="footnote1" style="color:red;">[1] If we could provide you with infinite space, you think we''d be
bothered writing code for mortals like you to use?</p>'
)
acceptNewLinkFrom: template = (
  | styled = template visual at: #parentNode. |
  styled at: #href put: template text. 
  styled at: #contentEditable put: #false. 
  styled removeChild: template visual
)
workspaceTagged: tag <String> ^ <ObjectPresenter> = (
   ^(ampletCache at: tag ifAbsentPut: [getWorkspace]) presenter
)
ampletForMethodNamed: n <Symbol> ofClass: c <Class> ^ <MethodPresenter> = (
^ (ide browsing MethodSubject onModel:
((ClassMirror reflecting: c) methods 
  findMirrorNamed: n)) presenter
)
getWorkspace ^ <ObjectSubject> = (
    | aws = ide theWorkspaceManager AllWorkspacesSubject new. |
    aws addWorkspace.
    (* Produce a fresh subject for the new workspace. Otherwise, the document and the workspace manager will share a presenter, and in some cases
    the presenter will be left in the document's fragment tree and be missing in the workspace manager's tree.
    *)
    ^ObjectSubject onModel: (aws allWorkspaces last objectMirror)
)
ampletForClass: c <Class> ^ <ClassPresenter> = (
|
cdm = (ClassMirror reflecting: c) mixin declaration.
cm = ide browsing ClassModel declaration: cdm exemplar: nil.
|

^(ClassSubject onClassModel: cm) presenter.
)
public evaluateFragment: expr <String> ^ <Fragment> = (
  | t <ThreadMirror | Error> = [evaluate: expr] on: Error do: [:ce | ce]. |
  t isKindOfThreadMirror ifFalse: [
  ^(link: t printString action: [inspectObjectMirror: (ObjectMirror reflecting: t)])
    color: (Color r: 1 g: 0 b: 0)  
  ].
  t isBroken ifTrue: [
        ^(link: t result reflectee printString action: [enterSubject: (ThreadSubject onModel: t)])
         color: (Color r: 1 g: 0 b: 0)].
  t result reflectee isKindOfFragment ifFalse: [
        ^(link: expr, ' does not evaluate to a valid Hopscotch fragment but to: ', t result reflectee printString
  action: [(inspectObjectMirror: t result)])
  color: (Color r: 1 g: 0 b: 0)].
  ^t result reflectee
)
inspect: o tag: tag <String> ^ <ObjectPresenter> = (
  ^(ampletCache at: tag ifAbsentPut: [ObjectSubject onModel: (ObjectMirror reflecting: o)]) presenter
)
linkTemplate = (
       | 
       jsDoc <Alien[Document]> =  retainedPlatform js global at: #document.
       dummy = jsDoc createElement: #div.
       template
       |
       
       template:: DefinitionTemplate 			
            caption: 'Insert URI for link:'
			initialText: 'https://yourURI'
			colorizerBlock:
				[:text <String> :cm <CodeMirrorFragment> | nil ]
			acceptResponse:
				[:template | updateGUI: [acceptNewLinkFrom: template]]
			cancelResponse:
				[:template | updateGUI: [(template visual at: #parentNode) replaceChild: dummy insteadOf: (template visual at: #parentNode)]].
       (*template parent: rendered content.*)
       ^template
)
htmlLink: selection <String> = (
       | 
       jsDoc <Alien[Document]> =  retainedPlatform js global at: #document.
       dummy = jsDoc createElement: #div.
       |
       dummy at: #innerHTML put: selection.
      ^DefinitionTemplate 			
            caption: 'Insert URI for link:'
			initialText: 'https://yourURIHere                                '
			colorizerBlock:
				[:text <String> :cm <CodeMirrorFragment> | nil ]
			acceptResponse:
				[:template | updateGUI: [acceptNewLinkFrom: template]]
			cancelResponse:
				[:template | updateGUI: [((template visual at: #parentNode) at: #parentNode) replaceChild: dummy insteadOf: (template visual at: #parentNode)]].
)
public addMethodFromSource: src <String> = (
   | b <MixinBuilder> = mirror getClass mixin asBuilder. |
   b methods addFromSource: src.
   ide  installFromBuilders: {b declaration}.
)
public addClassFromSource: src <String> = (
   | b <MixinBuilder> = mirror getClass mixin asBuilder. |
   b nestedClasses addFromSource: src.
   ide  installFromBuilders: {b declaration}.
)
public addLazySlotFromSource: src <String> = (
   | b <MixinBuilder> = mirror getClass mixin asBuilder. |
   b lazySlots addFromSource: src.
   ide  installFromBuilders: {b declaration}.
)
public makeDoItButton: src <String> ^ <ButtonFragment> = (
    ^button: src action: [updateGUI: [evaluate: src withoutNbsp]].
)
public addDefinitionFor: ast <ASTNode> from: src <String> = (
      ast isKindOfSlotDefAST ifTrue: [^addLazySlotFromSource: src].
      ast isKindOfClassDeclarationAST ifTrue: [^addClassFromSource: src].
      (*ast isKindOfMethodAST ifTrue: [*)^addMethodFromSource: src(*].*)
)
transclude: documentName <String> = (
    ^(DocumentSubject onModel: (ide namespacing Root at: documentName)) presenter
)
transcludeClass: className <String> = (
    ^ampletForClass: (ide namespacing Root at: className)
)
public addContentsUsingFolder: folder = (
  (* Docu-apps that have specific data representations they need to be able to save should do this here. By default, do nothing *)
)
jsDocument = (
  ^platform js global at: #document
)
mustBeLoaded: className = (
  Root at: className ifAbsent: [alert:  className, ' is not loaded, but the presentation requires it. Please load it now.']
)
ampletForClassDeclaration: cdm <ClassDeclarationMirror> ^ <ClassPresenter> = (
|
cm = ide browsing ClassModel declaration: cdm exemplar: nil.
|

^(ClassSubject onClassModel: cm) presenter.
)
ampletForMixin: m <InstanceMixin> ^ <ClassPresenter> = (
|
cdm = ClassDeclarationMirror reflecting: m.
|

^ampletForClassDeclaration: cdm
)
ampletForMethodNamed: n <Symbol> ofClassDeclaration: cdm <ClassDeclarationMirror> ^ <MethodPresenter> = (
^ (ide browsing MethodSubject onModel: (cdm instanceSide methods findMirrorNamed: n)) presenter
)
public classSource ^ <String> = (
  | 
  src = mirror getClass mixin declaration source. 
  classBody = src copyFrom: (src indexOf: '(') to: src size.
  |
  (* encode any double quotes so DOM parser won't choke when loading, cloning etc. *)
  ^(JSString new: classBody) replaceAll: '"' with: '&quot;'
)
public loadContentsUsingFolder: folder = (
  (* Docu-apps that have specific data representations they need to be able to load should do this here. By default, do nothing *)
)
public cloneButDontInstall: newName <String> ^ <Document> = (
  | 
  revisedContents =  '<div class = "ampleforthDocumentClass" name = "', 
  newName, 
  '" classBody = "',
  classSource,
  '" </div><div class = "ampleforthDocumentBody">', 
  contents, 
  '</div>'.
  clone = freshDocumentWithContents: revisedContents.
  |
  
  ^clone
)
public cloneNamed: newName <String> ^ <Document> = (
  | clone = cloneButDontInstall: newName. |
  (* Iff this is a top level document, install the clone *)
  (ide namespacing Root at: name ifAbsent: []) = self ifTrue: [ide namespacing Root at: newName put: clone].
  
  ^clone
)
) : (
)
class DocumentPresenter onDocumentSubject: s = ProgrammingPresenter onSubject: s (
  | public twoViewEditor <TwoViewEditorPresenter> |
) (
public isKindOfDocumentPresenter ^ <Boolean> = (
  ^true
)
isMyKind: other ^ <Boolean>  = (
  ^other isKindOfDocumentPresenter
)
respondToDelete = (
	updateGUI: [
      Root removeKey: subject name. 
      enterSubject: NamespaceSubject new
      ]
)
respondToInspectDocument = (
      enterSubject: (ide browsing ObjectSubject onModel: (ObjectMirror reflecting: subject document))
)
respondToMakeAmplet = (
  twoViewEditor respondToMakeAmplet
)
rawViewExposureButton  ^ <ButtonFragment> = (
  ^button: 'Toggle Raw HTML' action: [twoViewEditor toggleRawView]
)
respondToMakeBold = (
  twoViewEditor respondToMakeBold
)
respondToMakeItalic = (
  twoViewEditor respondToMakeItalic
)
respondToUnderline = (
  twoViewEditor respondToUnderline
)
makeAmpletButton ^ <ButtonFragment> = (
  ^button: 'Make It an Amplet' action: [respondToMakeAmplet]
)
saveDocumentButton = (
  ^saveButtonWithAction: [subject save]
)
helpText ^ <AmpleforthFragment> = (
  | mapping = Map new. |
  mapping 
    at: #documentName put: (label: subject name);
    at: #toggleRawViewButton put: rawViewExposureButton;
    at: #makeAmplet put: makeAmpletButton;
    at: #saveDocument put: saveDocumentButton;
    at: #hopscotchRefreshButton put: refreshButton;
    at: #hopscotchHelpButton put: helpButton;
    at: #documentMenu put: (dropDownMenu: [docMenu]).
  ^ampleforth: 'This is a document presenter. Below this help text you see a rich document editor, known as the <i>raw view</i>. 
  <br><br>
  Just above the editor is a toggle, that controls the display of a tool bar.
  When expanded, the tool bar contains the following:
  <ul>
  <li><div class = "documentName"></div></li>, the name of the document.
  <li><div class = "toggleRawViewButton"></div></li> Toogles the display of the <i>raw view</i> of the document. The raw view shows the raw HTML markup that defines the document contents. You can edit the raw view and the  rich document view will update live, accordingly. The reverse is also true - any changed in the rich view are instantly reflected in the raw view.
  <li><div class = "makeAmplet"></div></li> Converts the selected text into an amplet. The selection must be a unary message which, when sent to the document, returns a Hopscotch fragment.
   <li><div class = "saveDocument"></div></li> Saves the document.
   <li><div class="hopscotchRefreshButton"> </div> Refreshes the display.</li>
   <li><div class = "hopscotchHelpButton"></div> Displays this help message.</li>
   <li><div class = "documentMenu"></div></li> A menu with options for inspecting the document in an object presenter, inspecting this presenter or deleting the document.
  </ul>' mapping: mapping
)
definition ^ <Fragment> = (
  twoViewEditor::  (TwoViewEditorSubject onModel:  subject document) presenter.  
  ^column: {
       helpSection.
       toolbarToggle.
       twoViewEditor
  }
)
respondToMakeList = (
  twoViewEditor respondToMakeList
)
respondToMakeLink = (
  twoViewEditor respondToMakeLink
)
respondToMakeOrderedList = (
  twoViewEditor respondToMakeOrderedList
)
showItButton = (
  ^button: 'Show It' action: [respondToShowIt]
)
respondToShowIt = (
  twoViewEditor respondToShowIt
)
public respondToMakeButton = ( 
  twoViewEditor respondToMakeButton
)
respondToMakeSuperscript = (
  twoViewEditor respondToMakeSuperscript
)
respondToMakeSubscript = (
  twoViewEditor respondToMakeSubscript
)
respondToMakeHeading: tagName <String> = (
  twoViewEditor respondToMakeHeading: tagName
)
respondToCenter = (
  twoViewEditor respondToCenter
)
respondToStrikethrough = (
  twoViewEditor respondToStrikethrough
)
sectionMenu ^ <Menu> = (
  ^menuWithLabelsAndActions: {
        {'H1'. [respondToMakeHeading: 'H1']}.
        {'H2'. [respondToMakeHeading: 'H2']}.
        {'H3'. [respondToMakeHeading: 'H3']}.
        {'H4'. [respondToMakeHeading: 'H4']}.
        {'H5'. [respondToMakeHeading: 'H5']}.
        {'H6'. [respondToMakeHeading: 'H6']}.        
	}
)
docMenu ^ <Menu> = (
  ^menuWithLabelsAndActions: {
        {'Inspect Document Object'. [respondToInspectDocument]}.
        {'Inspect Presenter'. [respondToInspectPresenter]}.
        #separator.
        {'Delete'. [respondToDelete]}.
	}
)
public toolbarToggle = (
  ^collapsed: [nothing] expanded: [row: {
         label: subject name.
         smallBlank.
         rawViewExposureButton.
         smallBlank.
         button: 'B' action: [respondToMakeBold].
         smallBlank.
         button: 'i' action: [respondToMakeItalic].
         smallBlank.
         button: 'U' action: [respondToUnderline].
         mediumBlank.
         button: '-><-' action: [respondToCenter].
         mediumBlank.
         button: 's' action: [respondToStrikethrough].
         mediumBlank.
         mediumBlank.
         button: 'x²' action: [respondToMakeSuperscript].
         smallBlank.
         button: 'x₂' action: [respondToMakeSubscript].
         mediumBlank.
         button: 'List' action: [respondToMakeList].
         smallBlank.
         button: 'Ordered List' action: [respondToMakeOrderedList].
         mediumBlank.
         button: 'Link' action: [respondToMakeLink].
         mediumBlank.
         dropDownMenu: [sectionMenu] image: ide images sectionImage.
         mediumBlank.
         button: 'H1' action: [respondToMakeHeading: 'H1'].
         smallBlank.
         button: 'H2' action: [respondToMakeHeading: 'H2'].
         mediumBlank.
         makeAmpletButton.
         smallBlank.          
         showItButton. 
         smallBlank.
         button: 'Make DoIt Button' action: [respondToMakeButton].         
         smallBlank.
         button: 'Define It' action: [twoViewEditor respondToDefineIt].
         itemReferencesButtonWithAction: [browseSelector: subject name].
         smallBlank.
         saveDocumentButton.
         smallBlank.
         refreshButton.			
         smallBlank.
         helpButton.
         smallBlank.
         dropDownMenu: [docMenu].
        }].
)
) : (
public onSubject: os <ObjectSubject> ^ <Instance> = (
  ^onDocumentSubject: (DocumentSubject onModel: os objectMirror reflectee)
)
)
public class DocumentSubject onModel: m <Document> = Subject onModel: m (
) (
public isKindOfDocumentSubject ^ <Boolean> = (
  ^true
)
isMyKind: other ^ <Boolean> = (
  ^other isKindOfDocumentSubject
)
public name ^ <String> = (
  ^document name
)
public document ^ <Document> = (
  ^model
)
public createPresenter ^ <DocumentPresenter> = (
  ^DocumentPresenter onDocumentSubject: self
)
psoupHTML ^ <String> = (
  ^'   <script type="text/javascript">
      function scheduleTurn(timeout) {
        if (timeout >= 0) {
          setTimeout(function() {
            var timeout = Module._handle_message();
            scheduleTurn(timeout);
          }, timeout);
        }
      }

      var Module = {
        noInitialRun: true,
        noExitRuntime: true,
        onRuntimeInitialized: function() {
          var url = new URLSearchParams(window.location.search);
          var request = new XMLHttpRequest();
          request.open("GET", url.get("snapshot"), true);
          request.responseType = "arraybuffer";
          request.onload = function (event) {
            var jsBuffer = new Uint8Array(request.response);
            var cBuffer = _malloc(jsBuffer.length);
            writeArrayToMemory(jsBuffer, cBuffer);
            Module._load_snapshot(cBuffer, jsBuffer.length);
            _free(cBuffer);
            scheduleTurn(0);
          };
          request.send();
        },
        print: function(text) {
          if (arguments.length > 1) {
            text = Array.prototype.slice.call(arguments).join(" ");
          }
          console.log(text);
        },
        printErr: function(text) {
          if (arguments.length > 1) {
            text = Array.prototype.slice.call(arguments).join(" ");
          }
          console.error(text);
        },
        setStatus: function(text) {
          console.log(text);
        },
      };
    </script>
<script async type="text/javascript" src="primordialsoup.js"></script>
    <script src="CodeMirror/lib/codemirror.js"></script>
    <link rel="stylesheet" href="CodeMirror/lib/codemirror.css"></link>
    <script src="CodeMirror/addon/display/autorefresh.js"></script>'
)
public printString ^ <String> = (
  ^'Document ', name
)
public completeHTML ^ <String>  = (
  ^'<div class = "ampleforthDocumentClass" name = "', 
  document name, 
  '" classBody = "',
  document classSource,
  '" </div><div class = "ampleforthDocumentBody">', 
  document contents, 
  '</div>', 
  psoupHTML
)
public cloneNamed: n <String>  (* :exemplar: cloneNamed: #Dummy *)= (
   | 
   mb = documentHolderMixinBuilder.
   |
   (* clone document class *)
   mb nestedClasses addFromSource: 'public class ', n, ' contents: c <String> = Document named: #', n,  ' contents: c ',  document classSource.
   mb declaration install. 
   (* instantiate cloned class, and use it as model for an instance of my class, which we return *)
   ^class onModel: ((((ObjectMirror reflecting: ide documentHolder) evaluate: n) result reflectee) contents: document contents)
)
processImagesFromDom: dom usingFolder: folder = (
  | 
  images = dom getElementsByTagName: #img.
  imageFolder = folder getFolder: 'images'.
  |
  (* for each image in the main document, save contents to file in zip folder 'images' *)
  (0 to: (images at: #length) -1) do: [:i <Integer> | 
  | img <Alien[Node]> = images at: i.  fn <String> = img at: #name. |
    imageFolder file: fn contents: ((retainedPlatform js global fetch: (img at: #src)) then: [:r | r blob]). 
    (* revise src attribute to an extenally valid URI *)
    img at: #src put: './images/', fn.
  ].
)
public savedHTMLFor: dom <Alien[Node]> ^ <String>  = (
  ^'<div class = "ampleforthDocumentClass" name = "', 
  document name, 
  '" classBody = "',
  document classSource,
  '" </div><div class = "ampleforthDocumentBody">', 
  ((dom at:  #body) at: #outerHTML), 
  '</div>', 
  psoupHTML
)
public save = (
  createFolder save.
)
ampletExpressionsIn: dom  ^ <List[String]> = (
  | 
  amplets = dom getElementsByClassName:  'ampleforth'. 
  ampletExpressions = List new.
  |
  0 to: (amplets at: 'length') - 1 do: [:i | ampletExpressions add: ((amplets at: i) getAttribute: 'name'). nil].
  ^ampletExpressions
)
potentialImportsUsing: dom ^ <Set[String]> = (
  | importCandidates <Set[String]> = Set new. |
 gatherMessagesOf: document mirror getClass mixin declaration into: importCandidates using: dom.
 ^importCandidates
)
processIcons: iconNamespace fromDom: dom usingFolder: folder = (
  | 
  nonstandardIcons <List[Icon]>= iconNamespace keys select: [:k <String> | (ide standardPreludeIconNames includes: k) not].
  importedIcons <List[String]> = nonstandardIcons select: [:k <String> | (potentialImportsUsing: dom)  includes: k].
  |
  (* for each non-standard icon in the main document, save contents to file in zip folder 'icons'. W need to get the image data and write it out, but that may be impossible *)
  importedIcons do: [:iconName <String> | 
  folder addFile: iconName, '.png' contents: ((iconNamespace at: iconName) decode)
  ].
)
processObjectsFromDom: dom usingFolder: folder = (
  | 
  docs <JSZip> = folder addFolder: 'documents'. 
  classes <JSZip> = folder addFolder: 'classes'.
  icons <JSZip> = folder addFolder: 'icons'.
  imported <List> = dependenciesUsing: dom. 
  importedClasses <List[Class]> = imported select: [:o | o isKindOfClass].
  importedDocuments <List[Document]> = imported select: [:o | o isKindOfDocument].
  importedNamespaces <List[Namespace]>= imported select: [:o | o isKindOfNamespace].
  |
   (* For each non-standard class in the main document, save it in zip folder 'classes'. *)
   importedClasses do: [:c <Class> | 
     classes file: c name, '.ns' contents: (ClassSubject onDeclaration: (ClassMirror reflecting: c) mixin declaration) compilationUnitSource
   ].
   (* for each transcluded document in the main document, save it in zip folder 'documents'.' *)
   importedDocuments do: [:d <Document> | docs file: d name, '.zip'  contents: (DocumentSubject onModel: d) createFolder asBlob].
   (* processIcons: (importedNamespaces at: #Icons) fromDom: dom usingFolder: icons. *)
)
dependenciesUsing: dom ^ <List> = (
  | 
  (* Obtain all non-standard entries in the root namespace.*)
  nonstandardNames <List> = ide namespacing Root keys select: [:k <String> | (ide standardPreludeMessages includes: k) not].
  (* Intersect with any potential imports, yielding a conservative list of the names of the document's non-standard dependencies *)
  importedNames <List[String]> = nonstandardNames select: [:k <String> |(potentialImportsUsing: dom) includes: k].
  |
  (* Lookup the values of the dependencies and return them *)
  ^importedNames collect: [:k <String> | ide namespacing Root at: k] 
)
gatherMessagesOf: c <ClassDeclarationMirror> into: importCandidates <Set[String]> using: dom = (
   | 
   relevantAmplets = (ampletExpressionsIn: dom) select: [:e <String> | 
     (* If an amplet expression includes a colon, it was created by a ShowIt or Make DoitButton operation. 
     It may include code that references elements of the Root namespace, and we should examine it.
     *)
     (e indexOf: ':') ~= 0
     ]. 
   |
   (* Gather all selectors from c, the document class *)
   importCandidates addAll: c header selectors.

  c instanceSide methods do: [:mm <MethodMirror>  | importCandidates addAll: mm selectors].
  c classSide methods do: [:mm <MethodMirror> | importCandidates addAll: mm selectors].
  c instanceSide lazySlots do: [:ls <LazySlotMirror> | importCandidates addAll: ls selectors].    
  c instanceSide nestedClasses do: [:nc <ClassDeclarationMirror> | gatherMessagesOf: nc into: importCandidates using: dom].
  (* Check the relevant amplets as well *)
  relevantAmplets do: [:e <String> | 
    | m <MethodMirror> = (* Compile the expression so we can get at its selectors easily *)
       document mirror compileExpression: e scope: Map new.
    |
    importCandidates addAll: m selectors
    ].
  (* Remove c's name, if it shows up,  to prevent infinite regress *)
  importCandidates remove: c name ifAbsent: []. 
)
public createFolder ^ <Folder> = (
(*
This method creates an in-memory zip folder representing the current document. See the class comment for details of the persistent representation
*)
  | 
  folder <Folder> = (* Create a zip folder *) ide webFiles Folder named: name. 
    (* add contents subfolder *)
  innerFolder = folder addFolder: 'contents'.
  (* Copy the DOM so we can modify it before saving *)
  dom = DOMParser new parseFromString: document contents mimeType: 'text/html'.
  |
  (* add images to folder *)
  processMediaFromDom: dom usingFolder: folder.
  (* process objects accessed from the IDE root namespace, such as classes and transcluded documents *)
  processObjectsFromDom: dom usingFolder: folder.
  (* add contents if any *)
  model addContentsUsingFolder: innerFolder.
  (* add main document to folder; we do this last, so service methods can update the copied dom first *)
  folder addTextFile: name, '.html' contents: (savedHTMLFor: dom).  
  ^folder
)
processMediaFromDom: dom usingFolder: folder = (
 (* for now, use old way to deal with images for compatibility *)
  processImagesFromDom: dom usingFolder: folder.
  processMediaOfType: #video fromDom: dom usingFolder: folder.
  processMediaOfType: #audio fromDom: dom usingFolder: folder
)
processMediaOfType: type fromDom: dom usingFolder: folder = (
  | 
  media = dom getElementsByTagName: type.
  folderName = type (*= #img ifTrue: [#images] ifFalse: [type]*).
  mediaFolder = folder getFolder: folderName.
  |
  (* for each media resource in the main document, save contents to per media type folder *)
  (0 to: (media at: #length) -1) do: [:i <Integer> | 
  | resource <Alien[Node]> = media at: i.  fn <String> = resource at: 'title'. |
    mediaFolder file: fn contents: ((retainedPlatform js global fetch: (resource at: #src)) then: [:r | r blob]). 
    (* revise src attribute to an externally valid URI *)
    resource at: #src put: './', folderName, '/', fn.
  ].
)
) : (
)
class DummySubject = Subject onModel: nil (
) (
public isKindOfDummySubject ^ <Boolean> = (
  ^true
)
isMyKind: other ^ <Boolean> = (
  ^other isKindOfDummySubject
)
) : (
)
dummySubject ^ <Subject> = (
  ^DummySubject new  
)
createDocumentSubclassNamed: n <Symbol> body: b <String> ^ <Class> (* :exemplar: createDocumentSubclassNamed: #ADoc body: '()()' *)= ( 
  | 
  src <String> = 'public class ', n,  ' contents: c <String> = Document named: #', n , ' contents: c ',  b. 
  mb <MixinBuilder> = documentHolderMixinBuilder.
  |
  mb nestedClasses addFromSource: src.
  mb declaration install.
  ^((ObjectMirror reflecting: ide documentHolder ) evaluate: n) result reflectee
)
public classOfHTMLDocument: dom <Alien[Node]>  ^ <Class> = (

  | 
  candidates <Alien[Array[Element]]> = dom getElementsByClassName: #ampleforthDocumentClass.
  ampleforthDocumentClass <Alien[Element] | Nil> = ((candidates at: 'length') = 0) ifFalse: [candidates at: 0].
  classBody <String>
  className <String> = ampleforthDocumentClass getAttribute: #name.
  |
  classBody:: (ampleforthDocumentClass isNil not and: [ampleforthDocumentClass hasAttribute: #classBody])   
     ifTrue: [ampleforthDocumentClass getAttribute: #classBody]
     ifFalse: ['()()'].
  ^createDocumentSubclassNamed: className body: classBody
)
public freshDocumentFromDOM: dom <Alien[Node]> ^ <Document> = (
  ^(classOfHTMLDocument: dom) contents: (textOfHTMLDocument: dom)
)
public freshDocumentWithContents: c <String> ^ <Document> = (

  | DOM <Alien[Element]> = DOMParser new parseFromString: c mimeType: 'text/html'. |
  ^freshDocumentFromDOM: DOM
)
public textOfHTMLDocument: dom  <Alien[Node]>  ^ <String> = (
  | 
  docCandidates = dom getElementsByClassName: 'ampleforthDocumentBody'. 
  ampleforthDocument <Alien[Element] | Nil> = 
    ((docCandidates at: 'length') = 0) ifFalse: [docCandidates at: 0].
  |
  ^ampleforthDocument ~= nil ifTrue: [ampleforthDocument at: #innerHTML]  ifFalse: [defaultAmpleforthDocumentBodyInnerHTML].
)
public documentHolderMixinBuilder ^ <MixinBuilder> = (
  ^(ObjectMirror reflecting: ide documentHolder) getClass mixin asBuilder
)
public freshDocumentNamed: n <Symbol> ^ <Document> = (
  ^freshDocumentWithContents: '<div class = "ampleforthDocumentClass" name = "', n, '" classBody = "
()()"></div><div class = "ampleforthDocumentBody" edition="2">', defaultAmpleforthDocumentBodyInnerHTML, '</div>'
)
loadClasses: classFolder <Alien[JSZip]>  into: namespace <NamespaceSubject> ifSuccess: successBlock <[]> ifFailure: failureBlock <[:List[String]]>= (
  |
  classPromises <List[JSPromise[String]]> = List new.
  promiseArray <JSArray[JSPromise[String]]>
  |
  classFolder forEach: [:path <String> :zo <ZipObject> | classPromises add: (zo async: #string). nil].
  promiseArray::  JSArray new: classPromises size.
  0 to: classPromises size -1 do: [:i <Integer> | promiseArray at: i put: (classPromises at: i+1)].
  namespace compilePromises: promiseArray ifSuccess: successBlock ifFailure: failureBlock.
)
loadImages: images <Alien[JSZip]> ofDocumentNamed: n <String>  into: namespace <NamespaceSubject> dom: dom  ifSuccess: successBlock <[]> ifFailure: failureBlock <[:List[String]]>= (
  |
  imageMap <Map[String, Alien[Promise[Alien[Blob]]]]> = Map new.
  (*find all image nodes *)
  imageNodes <Alien[HTMLCollection[Node]]> = dom getElementsByTagName: #img. 
  imgPromises <JSArray[Promise[Alien[Blob]]]> = JSArray new: (imageNodes at: #length).
  |

  images forEach: [:path <String> :zo <Alien[ZipObject]> |  
         | 
         (* The path argument is not working as specified, so we rely on an undocumented feature - the #unsafeOriginalName field.
         This is obviously undesirable, but so far we don't have a better solution.
         *)
         imageName <String> = (path at: #unsafeOriginalName) copyFrom: n size + 9 to: (path at: #unsafeOriginalName) size.
         |
         (* Create blob from image and store in a map keyed by image name *)       
         imageMap at: imageName put: (zo async: #blob)
         ].
         (* Collect images in an array, in 1:1 correspondence with img nodes *)
         collect: imageNodes into: imgPromises using: imageMap.

         (* Resolve image promises and process them *)
        (JSPromise all: imgPromises) then: [:imgs <JSArray[Alien[Blob]]> |  
             (* Create internal URIs for images and update img nodes accordingly *)
             0 to: (imgs at: #length) - 1 do: [:i <Integer> |    
               (imageNodes at: i) at: #src put: (URL createObjectURL: (imgs at: i)).
               ].
             successBlock value.
             nil.
             ] onError: [:ex | failureBlock value:  'Error loading document: ', ex printString. nil].
)
collect: nodes <HTMLCollection> into: promises <JSArray[Promise[Alien[Blob]]]> using: map <Map[String, Alien[Promise[Alien[Blob]]]]> = (
   (* Collect media in an array, in 1:1 correspondence with media nodes *)
   0 to: (nodes at: #length) - 1 do: [:i <Integer> |  
      promises at: i put: (map at: ((nodes at: i) at: #title)).
      ].
)
buildMap: map <Map[String, Alien[Promise[Alien[Blob]]]]> for: folder <Alien[JSZip]> withinDocumentNamed: n <String> = (
       folder forEach: [:path <String> :zo <Alien[ZipObject]> |  
         | 
         (* The path argument is not working as specified, so we rely on an undocumented feature - the #unsafeOriginalName field.
         This is obviously undesirable, but so far we don't have a better solution.
         *)
         resourceName <String> = (path at: #unsafeOriginalName) copyFrom: n size + 8 to: (path at: #unsafeOriginalName) size.
         |
         (* Create blob from resource and store in a map keyed by resource name *)       
         map at: resourceName put: (zo async: #blob)
         ].
)
public freshDocumentNamed: n <Symbol> initialText: t <String> ^ <Document> = (
  ^freshDocumentWithContents: '<div class = "ampleforthDocumentClass" name = "', n, '" classBody = "
()()"></div><div class = "ampleforthDocumentBody" edition="2">', (defaultAmpleforthDocumentBodyInnerHTML: t), '</div>'
)
blankDocumentText ^ <String>= (
  ^'  <h1>This is a blank document.</h1>'
)
defaultAmpleforthDocumentBodyInnerHTML ^ <String> = (
  ^defaultAmpleforthDocumentBodyInnerHTML: blankDocumentText
)
loadImages: images <Alien[JSZip]> ofDocumentNamed: n <String>  into: namespace <NamespaceSubject> dom: dom  ^ <JSPromise> = (
  ^JSPromise new: [:successBlock :failureBlock |
      |
      imageMap <Map[String, Alien[Promise[Alien[Blob]]]]> = Map new.
      (*find all image nodes *)
      imageNodes <Alien[HTMLCollection[Node]]> = dom getElementsByTagName: #img. 
      imgPromises <JSArray[Promise[Alien[Blob]]]> = JSArray new: (imageNodes at: #length).
      |

      images forEach: [:path <String> :zo <Alien[ZipObject]> |  
          | 
          (* The path argument is not working as specified, so we rely on an undocumented feature - the #unsafeOriginalName field.
          This is obviously undesirable, but so far we don't have a better solution.
          *)
          imageName <String> = (path at: #unsafeOriginalName) copyFrom: n size + 9 to: (path at: #unsafeOriginalName) size.
          |
          (* Create blob from image and store in a map keyed by image name *)       
          imageMap at: imageName put: (zo async: #blob)
      ].
      (* Collect images in an array, in 1:1 correspondence with img nodes *)
      collect: imageNodes into: imgPromises using: imageMap.

      (* Resolve image promises and process them *)
      (JSPromise all: imgPromises) then: [:imgs <JSArray[Alien[Blob]]> |  
           (* Create internal URIs for images and update img nodes accordingly *)
           0 to: (imgs at: #length) - 1 do: [:i <Integer> |    
               (imageNodes at: i) at: #src put: (URL createObjectURL: (imgs at: i)).
           ].
      successBlock value.
      nil.
      ] onError: [:ex | failureBlock value:  'Error loading document: ', ex printString. nil].
  ]
)
public loadTranscluded: jsz <JSZip> ofDocumentNamed: n<String> into: namespace <NamespaceSubject> ^ <JSPromise> = (
    ^JSPromise new: [:resolve <JSFunction> :reject <JSFunction> |
         |
         documentFolder <JSZip> = jsz folder: n, '/documents'.
         documentPromises <List[JSPromise[Blob]]> = List new.
         documentNames = List new.
         blobArray <JSArray[JSPromise[Blob]]>
         documentArray <JSArray[JSPromise[JSZip]]>
  |
  documentFolder forEach: [:path <String> :zo <ZipObject> |
    (* Again we rely on an undocumented feature - the #unsafeOriginalName field. See comments in #loadDocument:named:ifSuccess:ifFailure: *)
    ((path at: #unsafeOriginalName) endsWith: '.DS_Store') ifFalse: [
       documentNames add:  (path at: #unsafeOriginalName).
       documentPromises add: (zo async: #blob). 
       nil
    ]
  ].
     ('doc promises filled for transclusions of ', n) out.

  blobArray::  JSArray new: documentPromises size.
  documentArray::  JSArray new: documentPromises size.
  0 to: documentPromises size -1 do: [:i <Integer> | blobArray at: i put: (documentPromises at: i+1)].
  (JSPromise all: blobArray) then: [:blobs <JSArray[Blob]> |
     0 to: (blobs at: #length) -1 do: [:i <Integer> | 
       documentArray at: i put: (JSZip loadAsync: (blobs at: i)) 
   ].
   ('doc array filled for transclusions of ', n) out.
   (JSPromise all: documentArray) then: [:docs <JSArray[JSZip]> | 
       0 to: (docs at: #length) -1 do: [:i <Integer> | 
           | 
           doc <JSZip> = docs at: i.  
           fn <String> = documentNames at: i+1.
           dn <String> = fn copyFrom: (fn lastIndexOf: '/') + 1 to: fn size - 4. 
           |
           ('In transcluded processing of file ', fn, ' doc ', dn) out.
           loadDocument: doc named: dn into: namespace 
           ifSuccess: [('loaded transcluded document  ', dn) out. nil] 
           ifFailure: [:ex | reject apply: reject with: 'failed to load transcluded doc', dn, ' ', ex printString].
         ].
         ('resolved docs promise for ', n) out.
         resolve call: JSObject new with: docs.
         nil
       ] onError: [:ex | reject call: JSObject new with:  'Failed loading docs', ex printString. nil].
       nil
      ] onError: [:ex | reject call: JSObject new with:  'Failed loading docs', ex printString. nil].
    ]
)
loadResources: resources <Alien[JSZip]> ofDocumentNamed: n <String>  tag: tag <String> dom: dom  ^ <JSPromise> = (
  ^JSPromise new: [:resolve <JSFunction> :reject <JSFunction> |
      |
      resourceMap <Map[String, Alien[Promise[Alien[Blob]]]]> = Map new.
      (*find all resource nodes *)
      resourceNodes <Alien[HTMLCollection[Node]]> = dom getElementsByTagName: tag. 
      resourcePromises <JSArray[Promise[Alien[Blob]]]> = JSArray new: (resourceNodes at: #length).
      |

      resources forEach: [:path <String> :zo <Alien[ZipObject]> |  
          | 
          (* The path argument is not working as specified, so we rely on an undocumented feature - the #unsafeOriginalName field.
          This is obviously undesirable, but so far we don't have a better solution.
          *)
          resourceName <String> = (path at: #unsafeOriginalName) copyFrom: n size + 9 to: (path at: #unsafeOriginalName) size.
          |
          (* Create blob from resource and store in a map keyed by resource name *)       
          resourceMap at: resourceName put: (zo async: #blob)
      ].
      (* Collect resources in an array, in 1:1 correspondence with tag nodes *)
      collect: resourceNodes into: resourcePromises using: resourceMap.
     ( 'In resource processing for tag = ', tag) out.
      (* Resolve resource promises and process them *)
      (JSPromise all: resourcePromises) then: [:rs <JSArray[Alien[Blob]]> |  
           (* Create internal URIs for resources and update tag nodes accordingly *)
           0 to: (rs at: #length) - 1 do: [:i <Integer> |    
               (resourceNodes at: i) at: #src put: (URL createObjectURL: (rs at: i)).
           ].
                    ('resolved resource promise for tag ', tag, ' of ', n) out.

      resolve call: JSObject new with: rs.
      nil.
      ] onError: [:ex | reject call: JSObject new with: 'Error loading document resources of type', tag, ': ', ex printString. nil].
  ]
)
loadClasses: jsz <JSZip> ofDocumentNamed: n into: namespace <NamespaceSubject> ^ <JSPromise> = (
  ^JSPromise new: [:resolve <JSFunction> :reject <JSFunction> |
      |
      classFolder <JSZip> = jsz folder: n, '/classes'.
      classPromises <List[JSPromise[String]]> = List new.
      promiseArray <JSArray[JSPromise[String]]>
      |
      classFolder forEach: [:path <String> :zo <ZipObject> | classPromises add: (zo async: #string). nil].
      ('Looked at classes of ', n) out.
      promiseArray::  JSArray new: classPromises size.
      0 to: classPromises size -1 do: [:i <Integer> | promiseArray at: i put: (classPromises at: i+1)].
      namespace compilePromises: promiseArray 
        ifSuccess: [ ('resolved classes promise for ', n) out. resolve call: JSObject new. nil]
       ifFailure: [:ex | ('classes failed for ', n) out. reject call: JSObject new with: 'Failed loading classes', ex printString].
      nil.
    ]
)
public loadDocument2: jsz <Alien[JSZip]> named: n <String> into: namespace <NamespaceSubject> ifSuccess: successBlock <[]> ifFailure: failureBlock <[:List[String]]> = (
(* Takes a zipfile representing a Document and converts it into a live Document. This method is an attempt to clean up loadDocument:named:into:ifSuccess:ifFailure: so it isn't so large and monolithic, but so far it doesn't work due to async/error-handling issues. I think the issue is that JS promises only allow their resolution functions to be called from the function passed to the constructor, and the Alien mechanism interferes with that. One might fix this using a Jfunction desigend to take a Newspeak block and pass it JS lambdas that call resolve or reject. For now, putting this on hold.
 *)
  |
  contentsFolder <Alien[JSZip]> = jsz folder: n,  '/contents'.
  (* get main document *)
  main <Alien[ZipObject]> = jsz file: n, '/', n, '.html'.
  classesPromise = loadClasses: jsz ofDocumentNamed: n into: namespace.
  docsPromise = loadTranscluded: jsz ofDocumentNamed: n into: namespace.
  mainPromise = main async: #string.
  |
  
  (* Extract main document contents *)     
  mainPromise then: [:f  <String> |
      |
      (* parse main document *)
      dom <Alien[HTMLDocument]> = DOMParser new parseFromString: f mimeType: 'text/html'.
      promiseArray = JSArray new: 5.
      (* Once we have the dom, we can work on resources like images, videos , audio. *)
      imagePromise = loadResources: (jsz folder: n,  '/images') ofDocumentNamed: n tag: #img dom: dom.
      videoPromise = loadResources: (jsz folder: n,  '/video') ofDocumentNamed: n tag: #video dom: dom.
      audioPromise = loadResources: (jsz folder: n,  '/audio') ofDocumentNamed: n tag: #audio dom: dom.      
      |
      'In main processing' out.
      classesPromise then: [:c | c out. ] ifError: [:e | 'failed resolving classes ' out].
      docsPromise then: [:ds | 'Resolved docs for sure' out. ] ifError: [:e | 'failed resolving docs ' out].

      promiseArray at: 0 put: classesPromise; at: 1 put: docsPromise; at: 2 put: imagePromise;
        at: 3 put: videoPromise; at: 4 put: audioPromise. 
        ('Promise array loaded for document ', n) out.
      (* Every thing is ready except the document-specific contents *)
      (JSPromise all: promiseArray) then: [:pa | 
        |  (* Now we can create the document *)
        doc <Document> = ide documents freshDocumentFromDOM: dom. 
        (* Once the document can be built, we can ask it to process its specific contents *)
        contentsPromise = getContentsOf: doc of: jsz.      
        |        
        'In contents processing' out.
        contentsPromise then: [:c |
                'In final processing' out.
          namespace model at: n put: doc. 
          successBlock value.
          nil.
        ] onError: [:ex | failureBlock value:  'Error loading contents of document: ', ex printString. nil]. 
      ] onError: [:ex | failureBlock value:  'Error loading dependencies of document: ', ex printString. nil].
      nil.  
  ] onError: [:ex | failureBlock value:  'Error loading main document: ', ex printString. nil].
)
public loadDocument: jsz <Alien[JSZip]> named: n <String> into: namespace <NamespaceSubject> ifSuccess: successBlock <[]> ifFailure: failureBlock <[:List[String]]> = (
(* Takes a zipfile representing a Document and converts it into a live Document. *)
  |
  images <Alien[JSZip]> = jsz folder: n, '/images'.
  videoFolder <Alien[JSZip]> = jsz folder: n, '/video'.
  audioFolder <Alien[JSZip]> = jsz folder: n, '/audio'.
  classFolder <Alien[JSZip]> = jsz folder: n, '/classes'.
  documentFolder <Alien[JSZip]> = jsz folder: n, '/documents'.
  imageMap <Map[String, Alien[Promise[Alien[Blob]]]]> = Map new.
  videoMap <Map[String, Alien[Promise[Alien[Blob]]]]> = Map new.
  audioMap <Map[String, Alien[Promise[Alien[Blob]]]]> = Map new.  
  contents <Alien[JSZip]> = jsz folder: n,  '/contents'.
  (* get main document *)
  main <Alien[ZipObject]> = jsz file: n, '/', n, '.html'.
  |
  loadClasses: classFolder into: namespace ifSuccess: [ 
    loadTranscluded: documentFolder into: namespace ifSuccess: [
       images forEach: [:path <String> :zo <Alien[ZipObject]> |  
         | 
         (* The path argument is not working as specified, so we rely on an undocumented feature - the #unsafeOriginalName field.
         This is obviously undesirable, but so far we don't have a better solution.
         *)
         imageName <String> = (path at: #unsafeOriginalName) copyFrom: n size + 9 to: (path at: #unsafeOriginalName) size.
         |
         (* Create blob from image and store in a map keyed by image name *)       
         imageMap at: imageName put: (zo async: #blob)
         ].
       (* Extract main document contents *)     
      (main async: #string) then: [:f  <String> | 
         |
         (* parse main document *)
         dom <Alien[HTMLDocument]>  = DOMParser new parseFromString: f mimeType: 'text/html'.
         (*find all image nodes *)
         imageNodes <Alien[HTMLCollection[Node]]> = dom getElementsByTagName: #img.  
         imgPromises <JSArray[Promise[Alien[Blob]]]> = JSArray new: (imageNodes at: #length).
         (*find all video nodes *)
         videoNodes <Alien[HTMLCollection[HTMLVideoElement]]> = dom getElementsByTagName: #video.  
         videoPromises <JSArray[Promise[Alien[Blob]]]> = JSArray new: (videoNodes at: #length).
         (*find all audio nodes *)
         audioNodes <Alien[HTMLCollection[HTMLAudioElement]]> = dom getElementsByTagName: #audio.  
         audioPromises <JSArray[Promise[Alien[Blob]]]> = JSArray new: (audioNodes at: #length).
         |
         (* Collect images in an array, in 1:1 correspondence with img nodes *)
         0 to: (imageNodes at: #length) - 1 do: [:i <Integer> |  
             imgPromises at: i put: (imageMap at: ((imageNodes at: i) at: #name)).
             ].
         (* Collect videos in an array, in 1:1 correspondence with video nodes *)
         buildMap: videoMap for: videoFolder withinDocumentNamed: n.
         collect: videoNodes into: videoPromises using: videoMap.
         (* Collect audios in an array, in 1:1 correspondence with audio nodes *)
         buildMap: audioMap for: audioFolder withinDocumentNamed: n.
         collect: audioNodes into: audioPromises using: audioMap.
         (* Resolve image promises and process them *)
        (JSPromise all: imgPromises) then: [:imgs <JSArray[Alien[Blob]]> |  
             (* Create internal URIs for images and update img nodes accordingly *)
             0 to: (imgs at: #length) - 1 do: [:i <Integer> |    
               (imageNodes at: i) at: #src put: (URL createObjectURL: (imgs at: i)).
               ]. 
             (* Resolve video promises and process them *)
             (JSPromise all: videoPromises) then: [:videos <JSArray[Alien[Blob]]> |  
               (* Create internal URIs for videos and update video nodes accordingly *)
               0 to: (videos at: #length) - 1 do: [:j <Integer> |   
                 (videoNodes at: j) at: #src put: (URL createObjectURL: (videos at: j)).
                 ].  
                 (* Resolve audio promises and process them *)
                 (JSPromise all: audioPromises) then: [:audios <JSArray[Alien[Blob]]> |  
                 (* Create internal URIs for audios and update audio nodes accordingly *)
                 0 to: (audios at: #length) - 1 do: [:k <Integer> |    
                   (audioNodes at: k) at: #src put: (URL createObjectURL: (audios at: k)).
                   ].              
                  (* Create a regular doc from the revised DOM, and give it a chance to load docu-app specific content *)
                  (namespace model at: n put: (ide documents freshDocumentFromDOM: dom)) loadContentsUsingFolder: contents. 
                  successBlock value.
                  nil.
                  ] onError: [:ex | failureBlock value:  'Error loading document: ', ex printString. nil].
               ] onError: [:ex | failureBlock value:  'Error loading document: ', ex printString. nil].
             ] onError: [:ex | failureBlock value:  'Error loading document: ', ex printString. nil].
             nil
         ] onError: [:ex | failureBlock value:  'Error loading document: ', ex printString. nil].
         nil
       ] ifFailure: [:ex | failureBlock value:  'Failure loading transcluded documents: ', ex printString. nil].
       nil.
     ] ifFailure: [:ex | failureBlock value:  'Failure loading document: ', ex printString. nil].
)
public loadTranscluded: documentFolder <Alien[JSZip]> into: namespace <NamespaceSubject> ifSuccess: successBlock <[]> ifFailure: failureBlock <[:List[String]]>= (
  |
  documentPromises <List[JSPromise[Blob]]> = List new.
  documentNames = List new.
  blobArray <JSArray[JSPromise[Blob]]>
  documentArray <JSArray[JSPromise[JSZip]]>
  |
  documentFolder forEach: [:path <String> :zo <ZipObject> |
    (* Again we rely on an undocumented feature - the #unsafeOriginalName field. See comments in #loadDocument:named:ifSuccess:ifFailure: *)
    ((path at: #unsafeOriginalName) endsWith: '.DS_Store') ifFalse: [
      documentNames add:  (path at: #unsafeOriginalName).
      documentPromises add: (zo async: #blob). 
      nil
    ]
    ].
  blobArray::  JSArray new: documentPromises size.
  documentArray::  JSArray new: documentPromises size.
  0 to: documentPromises size -1 do: [:i <Integer> | blobArray at: i put: (documentPromises at: i+1)].
  (JSPromise all: blobArray) then: [:blobs <JSArray[Blob]> |
     0 to: (blobs at: #length) -1 do: [:i <Integer> | 
       documentArray at: i put: (JSZip loadAsync: (blobs at: i)) 
     ].
     (JSPromise all: documentArray) then: [:docs <JSArray[JSZip]> | 
       loadDocNumber: 0 from: docs names: documentNames into: namespace 
       ifSuccess: successBlock
       ifFailure: failureBlock.
       nil
     ] onError: [:ex | failureBlock value:  'Error loading transcluded documents ', ex printString. nil].
     nil
  ] onError: [:ex | failureBlock value:  'Error reading transcluded documents: ', ex printString. nil].
)
loadDocNumber: i <Integer> from: zipArray <JSArray[JSzip]> names: names into: namespace ifSuccess: successBlock ifFailure: failureBlock = (
  | 
  doc <JSZip> = i >=  (zipArray at: #length) ifFalse: [zipArray at: i] ifTrue: [^successBlock value].  
  fn <String> = names at: i+1.
  dn <String> = fn copyFrom: (fn lastIndexOf: '/') + 1 to: fn size - 4. 
  |
  loadDocument: doc named: dn into: namespace ifSuccess: [
     loadDocNumber: i + 1 from: zipArray names: names into: namespace ifSuccess: successBlock ifFailure: failureBlock
  ] ifFailure: [:ex | ('Failed to load transcluded document ', dn) out.  failureBlock value: ex]
)
defaultAmpleforthDocumentBodyInnerHTML: userText <String> ^ <String> = (
  ^'<div class="self_ampleforth" contenteditable="true" style="border: 2px solid blue; resize: horizontal; overflow: auto; overflow-wrap: break-word; width: 40em;" onkeyup="updateRawHTML()" ondragover="((e) => {e.preventDefault();})(event)" ondrop="((e) => {
              e.preventDefault();
              e.stopPropagation();
            // Calculate the drop position within the text
            const range = document.caretRangeFromPoint(e.clientX, e.clientY);
            // Create a new text node to separate the image from the surrounding text
            const textNode = document.createTextNode(''\u00A0''); // Non-breaking space
            // Insert the text node at the calculated position
            range.insertNode(textNode);
            // Loop through dropped files
            for (const file of e.dataTransfer.files) {
                if (file.type.startsWith(''image/'')) {
                              const imageElement = document.createElement(''img'');
                              // Set the image element src field to a blob URL we create
                              imageElement.src = window.URL.createObjectURL(file);
                              imageElement.style.maxWidth = ''300px'';
                              imageElement.name = file.name;
                              // Insert the image after the text node
                              textNode.after(imageElement);               
               } // images
               if (file.type.startsWith(''video/'')) {
                              const videoElement = document.createElement(''video'');
                              // Set the image element src field to a blob URL we create
                              videoElement.src = window.URL.createObjectURL(file);
                              videoElement.style.maxWidth = ''300px'';
                              videoElement.controls = true;
                              videoElement.title = file.name;
                              console.log(file.name);
                              console.log(videoElement.title);
                              // Insert the video after the text node
                              textNode.after(videoElement);    
               } // video
               if (file.type.startsWith(''audio/'')) {
                              const audioElement = document.createElement(''audio'');
                              // Set the image element src field to a blob URL we create
                              audioElement.src = window.URL.createObjectURL(file);
                              audioElement.style.maxWidth = ''300px'';
                              audioElement.controls = true;
                              audioElement.title = file.name;
                              // Insert the audio after the text node
                              textNode.after(audioElement);    
               } // audio
            }//for (const file of e.dataTransfer.files
            updateRawHTML();
  }// ondrop body
  )//ondrop closure
  (event)"> <!-- self_ampleforth -->
  ', userText, '    <script>

        const textContainer = document.querySelector(''p'');
</div>'
)
) : (
)