Merge pull request #27 from Zero-True/text-components

Markdown and Text cells

zt_backend/models/__init__.py

@@ -1,6 +1,6 @@
-from .request import Request, ComponentRequest, DeleteRequest
+from .request import Request, ComponentRequest, DeleteRequest, CreateRequest
 from .response import Response
 from .notebook import Notebook
 from .components.slider import Slider
 
-__all__ = ['Request', 'Response', 'Slider', 'Notebook', 'ComponentRequest', 'DeleteRequest']
+__all__ = ['Request', 'Response', 'Slider', 'Notebook', 'ComponentRequest', 'DeleteRequest', 'CreateRequest']

zt_backend/models/components/slider.py

@@ -24,7 +24,7 @@ def validate_color(cls, color):
 
     @validator('value', always=True) #TODO: debug and replace with field validator
     def get_value_from_global_state(cls, value, values):
-        id = values.data['id']  # Get the id if it exists in the field values
+        id = values['id']  # Get the id if it exists in the field values
         try:
             if id and id in component_values:  # Check if id exists in global_state
                 return component_values[id]  # Return the value associated with id in global_state

zt_backend/models/generate_schema.py

@@ -9,6 +9,7 @@ def generate_schema():
     generate_json(Request, 'request')
     generate_json(ComponentRequest, 'component_request')
     generate_json(DeleteRequest, 'delete_request')
+    generate_json(CreateRequest, 'create_request')
     generate_json(Response, 'response')
     generate_json(Slider, 'slider')
     generate_json(Notebook, 'notebook')

zt_backend/models/notebook.py

@@ -18,7 +18,7 @@ class CodeCell(BaseModel):
     code: str
     output: str
     components: List[SerializeAsAny[ZTComponent]]
-    cellType: str = Field('code', enum=['code', 'markdown'])
+    cellType: str = Field(enum=['code', 'markdown', 'text'])
 
     @model_validator(mode='before')
     def deserialize_components(cls, values):

zt_backend/models/request.py

@@ -1,4 +1,4 @@
-from pydantic import BaseModel
+from pydantic import BaseModel, Field
 from typing import List, Dict, Union
 
 class CodeRequest(BaseModel):
@@ -27,3 +27,6 @@ class ComponentRequest(BaseModel):
 
 class DeleteRequest(BaseModel):
     cellId: str
+
+class CreateRequest(BaseModel):
+    cellType: str = Field(enum=['code', 'markdown', 'text'])

zt_backend/router.py

@@ -34,13 +34,13 @@ def runcode(request: request.ComponentRequest):
     print(request)
 
 @router.post("/api/create_cell")
-def create_cell():
+def create_cell(cellRequest: request.CreateRequest):
      createdCell = notebook.CodeCell(
          id=str(uuid.uuid4()),
-         code='#code here or else',
+         code='',
          components=[],
          output='',
-         cellType='code'
+         cellType=cellRequest.cellType
      )
      globalStateUpdate(newCell=createdCell)
      return createdCell

zt_frontend/package.json

@@ -10,12 +10,14 @@
   },
   "dependencies": {
     "@mdi/font": "7.0.96",
+    "@vueup/vue-quill": "^1.2.0",
     "ace-builds": "^1.24.1",
     "axios": "^1.5.0",
     "json-schema-to-typescript": "^13.1.1",
     "roboto-fontface": "*",
     "vue": "^3.2.0",
     "vue3-ace-editor": "^2.2.3",
+    "vue3-markdown-it": "^1.0.10",
     "vuetify": "^3.0.0",
     "webfontloader": "^1.0.0"
   },

zt_frontend/src/App.vue

@@ -8,16 +8,19 @@
     </v-app-bar>
     <v-main>
       <v-container v-for="codeCell in notebook.cells" >
-        <CodeComponent 
+        <component
+          :is="getComponent(codeCell.cellType)"
           :cellData = codeCell
           @runCode="runCode"
           @componentValueChange="componentValueChange"
           @deleteCell="deleteCell"/>
       </v-container>
       <v-toolbar color="secondary">
-        <v-btn small color="primary" @click="createCodeCell">Add Code Cell</v-btn>
+        <v-btn small color="primary" @click="createCodeCell('code')">Add Code Cell</v-btn>
         <v-spacer/>
-        <v-btn small color="primary">Add Markdown Cell</v-btn>
+        <v-btn small color="primary" @click="createCodeCell('markdown')">Add Markdown Cell</v-btn>
+        <v-spacer/>
+        <v-btn small color="primary" @click="createCodeCell('text')">Add Text Cell</v-btn>
       </v-toolbar>
     </v-main>
   </v-app>
@@ -29,13 +32,18 @@ import axios from 'axios';
 import { Request, CodeRequest } from './types/request';
 import { ComponentRequest } from './types/component_request';
 import { DeleteRequest } from './types/delete_request';
+import { CreateRequest, Celltype } from './types/create_request';
 import { Response } from './types/response';
 import { Notebook, CodeCell } from './types/notebook';
 import CodeComponent from '@/components/CodeComponent.vue';
+import MarkdownComponent from '@/components/MarkdownComponent.vue';
+import EditorComponent from '@/components/EditorComponent.vue';
 
 export default {
   components: {
-    CodeComponent
+    CodeComponent,
+    MarkdownComponent,
+    EditorComponent
   },
   data() {
     return {
@@ -77,8 +85,9 @@ export default {
       console.log('navigate')
     },
 
-    async createCodeCell(){
-      const response = await axios.post(import.meta.env.VITE_BACKEND_URL + 'api/create_cell');
+    async createCodeCell(cellType: string){
+      const cellRequest: CreateRequest = {cellType: cellType as Celltype}
+      const response = await axios.post(import.meta.env.VITE_BACKEND_URL + 'api/create_cell', cellRequest);
       const cell: CodeCell = response.data
       this.notebook.cells[cell.id] = cell
     },
@@ -87,6 +96,19 @@ export default {
       const deleteRequest: DeleteRequest = {cellId: cellId}
       await axios.post(import.meta.env.VITE_BACKEND_URL + 'api/delete_cell', deleteRequest);
       delete this.notebook.cells[cellId]
+    },
+
+    getComponent(cellType: string){
+      switch (cellType) {
+        case 'code':
+          return 'CodeComponent';
+        case 'text':
+          return 'EditorComponent';
+        case 'markdown':
+          return 'MarkdownComponent';
+        default:
+          throw new Error(`Unknown component type: ${cellType}`);
+      }
     }
   }
 }

zt_frontend/src/components/CodeComponent.vue

@@ -36,7 +36,7 @@ import 'ace-builds/src-noconflict/snippets/python';
 import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/theme-dracula';
 import { VSlider } from 'vuetify/lib/components/index.mjs';
-import { CodeCell, ZTComponent } from '@/types/notebook';
+import { CodeCell } from '@/types/notebook';
 
 
 export default {
@@ -71,13 +71,4 @@ export default {
     width: 100%;
     margin-bottom: 20px;
 }
-
-.formatted-code {
-white-space: pre-wrap;
-padding: 15px;
-border: 1px solid #ddd;
-overflow-x: auto;
-width: 100%; /* Similar width as the Ace editor */
-height: 100%; /* Similar height as the Ace editor */
-}
 </style>

zt_frontend/src/components/EditorComponent.vue

@@ -0,0 +1,45 @@
+<template>
+    <v-card flat>
+        <quill-editor toolbar="essential" :options="options"/>
+        <v-toolbar>
+            <v-spacer/>
+            <v-btn small color="primary" @click="deleteCell">Delete Cell</v-btn>
+        </v-toolbar>
+    </v-card>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+import { CodeCell } from '@/types/notebook';
+
+export default {
+    components: {
+        'quill-editor': QuillEditor
+    },
+    props: {
+        cellData: {
+            type: Object as PropType<CodeCell>,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            options: {
+                placeholder: this.cellData.code,
+                theme: 'snow'
+            }
+        }
+    },
+    methods: {
+        deleteCell(){
+            this.$emit('deleteCell', this.cellData.id);
+        }
+    },
+}
+</script>
+
+<style scoped>
+.ql-container.ql-snow{ border: none !important;}
+</style>

zt_frontend/src/components/MarkdownComponent.vue

@@ -0,0 +1,62 @@
+<template>
+    <v-card flat>
+        <ace-editor
+            v-model:value="cellData.code"
+            ref="editor"
+            class="editor"
+            theme="dracula"
+            lang="markdown"
+            :options="{
+                showPrintMargin: false,
+                enableBasicAutocompletion: true,
+                enableSnippets: true,
+                enableLiveAutocompletion: true
+            }"
+        >
+        </ace-editor>
+        <Markdown :source="cellData.code" />
+        <v-toolbar>
+            <v-spacer/>
+            <v-btn small color="primary" @click="deleteCell">Delete Cell</v-btn>
+        </v-toolbar>
+    </v-card>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import Markdown from 'vue3-markdown-it';
+import { VAceEditor } from 'vue3-ace-editor';
+import 'ace-builds/src-noconflict/mode-markdown';
+import 'ace-builds/src-noconflict/snippets/markdown';
+import 'ace-builds/src-noconflict/ext-language_tools';
+import 'ace-builds/src-noconflict/theme-dracula';
+import { CodeCell } from '@/types/notebook';
+
+
+export default {
+    components: {
+        'ace-editor': VAceEditor,
+        Markdown
+    },
+    props: {
+        cellData: {
+            type: Object as PropType<CodeCell>,
+            required: true,
+        },
+    },
+    methods: {
+        deleteCell(){
+            this.$emit('deleteCell', this.cellData.id);
+        }
+    },
+}
+</script>
+
+<style scoped>
+.editor {
+    filter: none;
+    height: 300px;
+    width: 100%;
+    margin-bottom: 20px;
+}
+</style>

zt_frontend/src/types/create_request.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export type Celltype = "code" | "markdown" | "text";
+
+export interface CreateRequest {
+  cellType: Celltype;
+  [k: string]: unknown;
+}

zt_frontend/src/types/notebook.d.ts

@@ -17,7 +17,7 @@ export type Id1 = string;
  */
 export type VariableName = string;
 export type Components = ZTComponent[];
-export type Celltype = "code" | "markdown";
+export type Celltype = "code" | "markdown" | "text";
 
 export interface Notebook {
   cells: Cells;
@@ -31,7 +31,7 @@ export interface CodeCell {
   code: Code;
   output: Output;
   components: Components;
-  cellType?: Celltype;
+  cellType: Celltype;
   [k: string]: unknown;
 }
 export interface ZTComponent {