Overview of Lively4?

What is Lively4?

# a script <script> lively.notify("scripts still run") </script> ```javascript function foo() { var a = "hello" return a + a } ```

Authoring Environment

Web Components

HTML

JavaScript

Text

Figures

#Graffle

#LivelyContainer

Active Content

Markdown

WYSIWYG vs Source Code

bidirectional editing

CodeCodeCan we use #Hashtags here? For navigation?

- allow markdown widget to edit source code inline

- allow markdown widget to update itself from HTML

Can we use #Hashtags here? For navigation?

- #TODO add links while typing (e.g. search://#hashtag) to hashtags (observe content changed?)

WYSIWYG editing using "contentEditable" becomes messy rather quickly:

- dragging out objects can leave empty HTML elements (div) behind

- (idea -> get rid of them or drag them...)

- highlight them use CSS to show invisible div tags?

While editing content in containers, it is not autosaved...

- #TODO add autosave button

// This is a JavaScript workspace // Use CTRL+D / CTRL+P to evaluate code 3 + 4 this.childNodes.length // 45

Navigation

- #Viewport panning should be implemented

Lively 4 Wigets / Content

- HTML text in form of DIV / SPAN / P elments

I am a DIV elment

I am a P element

- shapes in form of colored DIV elements (rounded) rectangles

- SVG lines and SVG Freehand drawn lines

Lively 4 Tools

Editor / Workspace

- overwrite "getDoitContext" on the #LivelyCodeMirror to bind the "this" variable

- This is not "persisted" because #BUG

Editor / Workspace

asdf

- #BUG in #Graffle line drawing inside container with scroll offset- implement (un-)grouping #Feature

this is

text

Lively4-Server

#TODO

- delete empty, globally positioned text-fields after they lost the focus.