fixes add_row and add_col

canisters/backend/src/files/update.rs

@@ -184,22 +184,29 @@ pub async fn group_update(data: String) -> Option<String> {
             EditorChange::Create(data) => {
                 let element_tree: &mut ElementTree =
                     element_trees.get_mut(&user)?.get_mut(&data.tree_id)?;
-                element_tree.elements.push_children(
-                    data.parent_id.clone(),
-                    data.id.clone(),
-                    data.clone().into(),
-                );
-                if let Some(prev_element_id) = data.prev_element_id {
-                    let children_list_of_parent_element =
-                        element_tree.elements.adjacency.get_mut(&data.parent_id)?;
-                    let index_of_prev_element = children_list_of_parent_element
-                        .into_iter()
-                        .position(|y| *y == data.id)?;
-                    let index_of_last_element = children_list_of_parent_element
-                        .into_iter()
-                        .position(|y| *y == data.id)?;
-                    children_list_of_parent_element
-                        .swap(index_of_last_element, index_of_prev_element);
+                match data.prev_element_id {
+                    Some(prev_element_id) => {
+                        let children_list_of_parent_element = element_tree
+                            .elements
+                            .adjacency
+                            .get_mut(&data.parent_id)
+                            .unwrap();
+                        let index_of_prev_element = children_list_of_parent_element
+                            .into_iter()
+                            .position(|y| *y == prev_element_id)
+                            .unwrap();
+                        children_list_of_parent_element.insert(index_of_prev_element + 1, data.id);
+                        element_tree
+                            .elements
+                            .push_vertex(data.id, data.clone().into());
+                    }
+                    None => {
+                        element_tree.elements.push_children(
+                            data.parent_id.clone(),
+                            data.id.clone(),
+                            data.clone().into(),
+                        );
+                    }
                 }
             }
             EditorChange::Update(data) => {

editor/src/app.rs

@@ -50,8 +50,8 @@ pub struct EditorElementProps {
 }
 
 pub struct Editor<T>
-where
-    T: BaseComponent + BaseComponent<Properties = EditorElementProps>,
+    where
+        T: BaseComponent + BaseComponent<Properties=EditorElementProps>,
 {
     element_tree: Rc<ElementTree>,
     editor_ref: NodeRef,
@@ -68,8 +68,8 @@ pub enum EditorMsg {
 }
 
 impl<T> Component for Editor<T>
-where
-    T: BaseComponent + BaseComponent<Properties = EditorElementProps>,
+    where
+        T: BaseComponent + BaseComponent<Properties=EditorElementProps>,
 {
     type Message = EditorMsg;
     type Properties = EditorProps;
@@ -109,8 +109,14 @@ where
                 true
             }
             EditorMsg::SlashInput(event, range) => {
+                // let id: Id =  Id::try_from(props.node.id());
                 if let Some((id, changes)) =
-                    on_slash_input(event, range, self.element_tree.as_ref())
+                    on_slash_input(
+                        event,
+                        // id, TODO
+                        range,
+                        self.element_tree.as_ref(),
+                    )
                 {
                     for i in changes {
                         Rc::make_mut(&mut self.element_tree).mutate_tree(&i);
@@ -166,7 +172,7 @@ where
                 .as_ref()
                 .unchecked_ref(),
         )
-        .unwrap();
+            .unwrap();
         mutation_observer.observe_with_options(
             &self.editor_ref.get().unwrap(),
             MutationObserverInit::new()

editor/src/handle_mutation.rs

@@ -18,7 +18,7 @@ pub fn handle_mutation(
 ) -> Option<()> {
     for mutation in mutation_event {
         if let Some(current_element) = mutation.target() {
-            log!(mutation.type_().clone());
+            // log!(mutation.type_().clone());
             match mutation.type_().as_ref() {
                 "characterData" => {
                     if let Some(parent_element) = current_element.parent_element() {
@@ -38,6 +38,7 @@ pub fn handle_mutation(
                     }
                 }
                 "attributes" => {
+                    // log!("change attr"); // TODO save attributes
                     if let Some(element) = current_element.parent_element() {
                         // log!(element.get_attribute("class"));
                         if let Ok(id) = Uuid::parse_str(element.id().as_ref()).map(Id::from) {
@@ -116,6 +117,7 @@ pub fn handle_mutation(
                         create_element(&mut changes, element, parent_id, element_tree.id.clone());
                     }
                     for i in changes {
+                        log!(&i);
                         element_tree.mutate_tree(&i);
                         onchange.emit(i);
                     }
@@ -130,13 +132,13 @@ pub fn handle_mutation(
 
 fn create_element(changes: &mut Vec<EditorChange>, element: Element, parent_id: Id, tree_id: Id) {
     let new_id = Id::new();
-    log!(element.id());
+    // log!(element.id());
     let prev_element_id = element
         .previous_element_sibling()
         .map(|el| el.id())
         .and_then(|id| Uuid::parse_str(&id).ok())
         .map(Id::from);
-    log!(&prev_element_id);
+    // log!(&prev_element_id);
     let create = EditorElementCreate {
         id: new_id,
         content: element.text_content().unwrap_or_default(),

editor/src/plugins/context_menu/mod.rs

@@ -8,7 +8,7 @@ use super::Position;
 
 #[derive(Properties, PartialEq)]
 pub struct ContextMenuProps {
-    pub position: Option<Position>,
+    pub position: Option<MouseEvent>,
     #[prop_or_default]
     pub children: Children,
 }
@@ -18,7 +18,7 @@ pub enum ContextMenuMessage {
 }
 
 pub struct ContextMenu {
-    pub position: Option<Position>,
+    pub position: Option<MouseEvent>,
     pub menu_ref: NodeRef,
     pub listener: Option<EventListener>,
 }
@@ -46,9 +46,20 @@ impl Component for ContextMenu {
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
             ContextMenuMessage::Click(event) => {
-                if self.position.is_some() {
-                    self.position = None;
-                    return true;
+                let element = self.menu_ref.cast::<Node>();
+                let clicked_element = ctx
+                    .props()
+                    .position
+                    .clone()
+                    .map(|p| p.target_unchecked_into::<Element>());
+                let target = &event.target_unchecked_into::<Element>();
+                let target_node = &event.target_unchecked_into::<Node>();
+                let mut is_click_on: bool = element.clone().unwrap().contains(Some(target_node));
+                if let Some(element) = &clicked_element.clone() {
+                    if element != target || is_click_on {
+                        self.position = None;
+                        return true;
+                    }
                 }
                 false
             }
@@ -74,11 +85,11 @@ impl Component for ContextMenu {
 
     fn view(&self, ctx: &Context<Self>) -> Html {
         let style = match &self.position {
-            Some(p) => format!("display: block; top : {}px; left:{}px;", p.y, p.x),
+            Some(p) => format!("display: block; top : {}px; left:{}px;", p.y(), p.x()),
             None => "display: None;".to_string(),
         };
         html! {
-            <div ref = {self.menu_ref.clone()} style = {style} >
+            <div ref = {self.menu_ref.clone()} style = {style} class="dropdown-content">
                 {ctx.props().children.clone()}
             </div>
         }

editor/src/utils/mod.rs

@@ -6,28 +6,38 @@ use shared::{
     schema::{EditorChange, EditorElement, EditorElementCreate, ElementTree},
 };
 use uuid::Uuid;
-use web_sys::{window, HtmlElement, Range};
+use web_sys::{window, HtmlElement, Range, Element};
 use yew::prelude::*;
 use yewdux::prelude::*;
 
 use crate::{plugins::DropDownItem, render::render};
 use wasm_bindgen::JsCast;
+use crate::plugins::get_caret_position;
 
 pub fn on_slash_input(
     event: DropDownItem,
+    // id: Id, // TODO get id of current element
     range: Option<Range>,
     element_tree: &ElementTree,
 ) -> Option<(Id, Vec<EditorChange>)> {
-    // if no focused element is found we are selecting the root element as focused
-    let current_element = window()?
-        .document()?
-        .active_element()
-        .and_then(|f| f.id().parse::<Uuid>().ok())
-        .map(Id::from)
-        .or(element_tree.elements.root)?;
+    // let current_element :HtmlElement = window()?.document()?.get_element_by_id(&id.to_string())?.dyn_into().unwrap(); // TODO this is the right way to get elements
+    let current_element: HtmlElement = window()?.document()?.active_element().unwrap().dyn_into::<HtmlElement>().unwrap(); // TODO this is very wrong.
+
     let id = Id::new();
     let mut changes: Vec<EditorChange> = Vec::new();
 
+    //  TODO
+    //     let caret_position = get_caret_position();
+    //     let text = current_element.inner_text().clone();
+    //     log!(&text);
+    //     let (before, after) = text.split_at(caret_position as usize);
+    //     log!(&before);
+    //     log!(&after);
+
+    let current_element = Some(current_element).and_then(|f| f.id().parse::<Uuid>().ok())
+        .map(Id::from)
+        .or(element_tree.elements.root)?;
+
     match event.text.as_str() {
         "table" => {
             // TODO we should hav ea generic way to create elements without using event.text.as_str()
@@ -52,7 +62,8 @@ pub fn on_slash_input(
                     tree_id: element_tree.id,
                     parent_id: *parent_id.unwrap_or(&current_element),
                     children: adjacency.get(&i.id).cloned(),
-                    prev_element_id: Some(current_element),
+                    // TODO fix this prev_element_id: Some(current_element),
+                    prev_element_id: None,
                 }));
             }
             return Some((id, changes));
@@ -100,7 +111,7 @@ pub fn on_slash_input(
                 tree_id: element_tree.id,
                 parent_id: current_element,
                 children: None,
-                prev_element_id: None,
+                prev_element_id: Some(current_element), // TODO when command `/image+Enter` it does not enter anything.
             }));
             return Some((id, changes));
         }

frontend/src/app.rs

@@ -55,7 +55,6 @@ pub fn app() -> Html {
         // history.push(Route::File { id: market_page });
     });
 
-
     let on_create_file: Callback<KeyboardEvent> = dispatch_file_directory
         .reduce_mut_future_callback_with(move |state, _e: KeyboardEvent| {
             Box::pin(async move {
@@ -98,8 +97,16 @@ pub fn app() -> Html {
     }
 
     let mut main_style = "10%";
-    if rc_device_info.is_aside  && window().unwrap_throw().inner_width().unwrap().as_f64().unwrap() > 750 as f64  {
-           main_style = "255px";
+    if rc_device_info.is_aside
+        && window()
+            .unwrap_throw()
+            .inner_width()
+            .unwrap()
+            .as_f64()
+            .unwrap()
+            > 750 as f64
+    {
+        main_style = "255px";
     };
 
     let add_file_blur: Callback<FocusEvent> = Callback::from(move |_e: FocusEvent| {
@@ -111,16 +118,13 @@ pub fn app() -> Html {
         curr.set_inner_html("");
     });
     let context_menu_items = use_state(|| html! {});
-    let context_menu_position: UseStateHandle<Option<Position>> = use_state_eq(|| None);
+    let context_menu_position: UseStateHandle<Option<MouseEvent>> = use_state_eq(|| None);
     let render_context_menu = {
         let context_menu_position = context_menu_position.clone();
         let context_menu_items = context_menu_items.clone();
         Callback::from(move |(e, items): (MouseEvent, Html)| {
             e.prevent_default();
-            context_menu_position.set(Some(Position {
-                x: e.page_x().into(),
-                y: e.page_y().into(),
-            }));
+            context_menu_position.set(Some(e));
             context_menu_items.set(items);
         })
     };

frontend/src/dummy_editor.rs

@@ -64,10 +64,7 @@ fn get_example_table() -> (Vec<EditorElement>, HashMap<Id, Vec<Id>>) {
             vec![heading.id, table_body.id, table_body.id],
         ),
         (heading.id, vec![company.id]),
-        (
-            table_body.id,
-            vec![table_row.id],
-        ),
+        (table_body.id, vec![table_row.id]),
     ]);
     return (
         vec![root_table, heading, company, table_body, table_row],
@@ -134,16 +131,13 @@ use editor::plugins::{
 pub fn DummyEditor() -> Html {
     let element_tree = generate_dummy();
     let context_menu_items = use_state(|| html! {});
-    let context_menu_position: UseStateHandle<Option<Position>> = use_state_eq(|| None);
+    let context_menu_position: UseStateHandle<Option<MouseEvent>> = use_state_eq(|| None);
     let render_context_menu = {
         let context_menu_position = context_menu_position.clone();
         let context_menu_items = context_menu_items.clone();
         Callback::from(move |(e, items): (MouseEvent, Html)| {
             e.prevent_default();
-            context_menu_position.set(Some(Position {
-                x: e.x().into(),
-                y: e.y().into(),
-            }));
+            context_menu_position.set(Some(e));
             context_menu_items.set(items);
         })
     };

frontend/src/editor_components/table/add_column.rs

@@ -1,11 +1,11 @@
 use editor::GlobalEditorState;
+use futures::TryFutureExt;
 use shared::id::Id;
+use shared::log;
 use shared::schema::{EditorChange, EditorElementCreate};
 use std::collections::HashMap;
-use futures::TryFutureExt;
-use shared::log;
 
-pub fn add_col(index: i32, global_state: &GlobalEditorState, table_id: &Id) -> Option<()> {
+pub fn add_col(global_state: &GlobalEditorState, table_id: &Id, col_number: usize) -> Option<()> {
     let root_table = global_state
         .element_tree
         .elements
@@ -18,8 +18,8 @@ pub fn add_col(index: i32, global_state: &GlobalEditorState, table_id: &Id) -> O
     // get the thead of table
     let thead = root_table
         .get(0)
-        .and_then(|thead_id| global_state.element_tree.elements.adjacency.get(thead_id));
-    let curr_column_id: Id = Id::try_from(thead.unwrap()[index as usize]).unwrap();
+        .and_then(|thead_id| global_state.element_tree.elements.adjacency.get(thead_id))?;
+    let curr_column_id: Id = Id::try_from(*thead.get(col_number)?).ok()?;
 
     let mut changes = Vec::new();
 
@@ -42,7 +42,7 @@ pub fn add_col(index: i32, global_state: &GlobalEditorState, table_id: &Id) -> O
             .elements
             .adjacency
             .get(row_id)?
-            .get(index as usize)?;
+            .get(col_number as usize)?;
         changes.push(EditorChange::Create(EditorElementCreate {
             id: Id::new(),
             content: "test".to_string(),