185091247 - Placeholders are shown for null/empty operands

css/mathfield.less

@@ -101,6 +101,7 @@
   overflow: hidden;
   padding: 2px 0 2px 1px;
   width: 100%;
+  // background-color: lightblue;
 }
 
 .ML__virtual-keyboard-toggle {

src/core-atoms/array.ts

@@ -786,6 +786,7 @@ export class ArrayAtom extends Atom {
  * Create a matrix cell with a placeholder atom in it.
  */
 function makePlaceholderCell(parent: ArrayAtom): Atom[] {
+  console.log('array.ts > makePlaceholderCell with parent:', parent);
   const first = new Atom({ type: 'first', mode: parent.mode });
   first.parent = parent;
   const placeholder = new PlaceholderAtom();

src/core-atoms/genfrac.ts

@@ -1,3 +1,4 @@
+/* eslint-disable curly */
 import type { MathstyleName, Style } from '../public/core-types';
 
 import { Atom, AtomJson } from '../core/atom-class';
@@ -64,6 +65,10 @@ export class GenfracAtom extends Atom {
     this.leftDelim = options?.leftDelim;
     this.rightDelim = options?.rightDelim;
     this.fractionNavigationOrder = options?.fractionNavigationOrder;
+    console.log('--------genfrac.ts > constructor-------');
+    // console.log('above:', JSON.stringify(above));
+    console.log('this.above:', this.above);
+    console.log('this.below:', this.below);
   }
 
   static fromJson(json: AtomJson): GenfracAtom {
@@ -120,6 +125,19 @@ export class GenfracAtom extends Atom {
   }
 
   render(context: Context): Box | null {
+    console.log('--------genfrac.ts > render--------');
+    // console.log('genfrac.ts > render() with context:', context);
+    console.log('\tgenfrac.ts > render() with this.above:', this.above); //this is missing placeholder
+    console.log('\tgenfrac.ts > render() with this.below:', this.below);
+
+    //either add placeHolderAtom or never delete it during delete keystroke
+    //when u set a frac and its got a placeholder this.above looks like [Atom, PlaceholderAtom];
+    //when you add number then delete it, it looks like [Atom]
+
+    if (this.above?.length === 1) {
+      // console.log('missing placeholder!');
+    }
+
     const fracContext = new Context(
       { parent: context, mathstyle: this.mathstyleName },
       this.style

src/core-atoms/placeholder.ts

@@ -15,6 +15,10 @@ export class PlaceholderAtom extends Atom {
       style: options?.style,
     });
     this.captureSelection = true;
+    console.log(
+      '-----PlaceholderAtom > constructor ------with mode:',
+      this.mode
+    );
   }
 
   static fromJson(json: AtomJson): PlaceholderAtom {
@@ -26,8 +30,10 @@ export class PlaceholderAtom extends Atom {
   }
 
   render(context: Context): Box {
+    console.log('--- placeholder.ts----- render');
     let result: Box;
     this.value = context.placeholderSymbol;
+
     if (typeof context.renderPlaceholder === 'function')
       result = context.renderPlaceholder(context);
     else result = this.createBox(context);
@@ -38,6 +44,7 @@ export class PlaceholderAtom extends Atom {
   }
 
   serialize(): string {
+    console.log('\tplaceholder.ts > serialize()');
     return '\\placeholder{}';
   }
 }

src/core-definitions/accents.ts

@@ -26,6 +26,7 @@ const ACCENTS = {
 
 defineFunction(Object.keys(ACCENTS), '{body:auto}', {
   createAtom: (command, args, style): Atom => {
+    console.log('accents.ts > defineFunction createAtom:');
     return new AccentAtom(
       command,
       !args[0] ? [new PlaceholderAtom()] : argAtoms(args[0]),

src/core-definitions/functions.ts

@@ -151,6 +151,9 @@ defineFunction(
   {
     ifMode: 'math',
     createAtom: (command, args, style) => {
+      console.log('---------funtions.ts > createAtom-------');
+      console.warn('error!!');
+
       const genfracOptions: GenfracOptions = { style };
       switch (command) {
         case '\\dfrac':
@@ -186,16 +189,28 @@ defineFunction(
           break;
         default:
       }
+      //when we enter a fraction "/" then enter a numberator then delete it the numerator, the placeholder is missing
 
+      //replace !args=0] with an isEmpty function - if falsy or empty object
+      let numerEmpty = false;
+      if (args[0]) {
+        numerEmpty = args[0]['group'].length === 0;
+        console.log('numeratorEmpty:', numerEmpty);
+      }
       return new GenfracAtom(
         command,
-        !args[0] ? [new PlaceholderAtom()] : argAtoms(args[0]),
+        numerEmpty ? [new PlaceholderAtom()] : argAtoms(args[0]),
+        // !args[0] ? [new PlaceholderAtom()] : argAtoms(args[0]), //old
         !args[1] ? [new PlaceholderAtom()] : argAtoms(args[1]),
         genfracOptions
       );
     },
     serialize: (atom, options) => {
-      const numer = atom.aboveToLatex(options);
+      let numer = atom.aboveToLatex(options);
+
+      // if (numer === '') numer = '\\placeholder{}'; //delete
+      // console.log('serialize with numer:', numer);
+
       const denom = atom.belowToLatex(options);
       // Special case serialization when numer and denom are digits
       if (/^[0-9]$/.test(numer) && /^[0-9]$/.test(denom))

src/core/atom.ts

@@ -37,6 +37,7 @@ export * from './atom-class';
 export function fromJson(json: AtomJson): Atom;
 export function fromJson(json: AtomJson[]): Atom[];
 export function fromJson(json: AtomJson | AtomJson[]): Atom | Atom[] {
+  console.log('atom.ts > fromJson with json', json);
   if (isArray<AtomJson>(json)) return json.map((x) => fromJson(x));
 
   if (typeof json === 'string') return Atom.fromJson(json);

src/core/box.ts

@@ -404,6 +404,7 @@ export class Box implements BoxInterface {
 
   toMarkup(): string {
     let body = this.value ?? '';
+    // console.log('box.ts > toMarkUp() > \n\t box:', this);
 
     //
     // 1. Render the children

src/core/parser.ts

@@ -887,7 +887,6 @@ export class Parser {
     if (row.length > 0) array.push(row);
 
     this.endContext();
-
     return def.createAtom(envName, array, rowGaps, args);
   }
 
@@ -962,6 +961,7 @@ export class Parser {
     }
 
     this.endContext();
+    console.log('parser.ts > line 960 > result: ', result);
 
     return result;
   }
@@ -1637,8 +1637,11 @@ export class Parser {
       //  Invoke the createAtom() function if present
       if (typeof info.createAtom === 'function') {
         result = info.createAtom(command, args, this.style);
-        if (deferredArg)
+        console.log('-----parser.ts---- top result:', result);
+        if (deferredArg){
+          console.log('-----parser.ts----defferedArg: true');
           result!.body = argAtoms(this.scanArgument(deferredArg));
+        }
       } else if (typeof info.applyStyle === 'function') {
         const style = {
           ...this.style,
@@ -1700,6 +1703,7 @@ export class Parser {
       if (smartFence) return [result, smartFence];
     }
 
+    console.log('----parser.ts bottom result:', result);
     return [result];
   }
 
@@ -1803,6 +1807,7 @@ export class Parser {
     if (!result) return false;
     if (Array.isArray(result)) this.mathlist.push(...result);
     else this.mathlist.push(result);
+    console.log('parser.ts line 1809 - this.mathlist', this.mathlist);
     return true;
   }
 }
@@ -1834,6 +1839,7 @@ export function parseLatex(
 
   const atoms: Atom[] = [];
   while (!parser.end()) atoms.push(...parser.scan(() => false));
+  console.log('parser.ts > line 1840 > atoms: ', atoms);
   return atoms;
 }
 

src/editor-mathfield/keyboard-input.ts

@@ -59,6 +59,10 @@ export function onKeystroke(
   evt: KeyboardEvent
 ): boolean {
   const { model } = mathfield;
+  // console.log(
+  //   'keyboard-input.ts > \n\t 🔨 onKeyStroke >  🍔keystroke:',
+  //   keystroke
+  // );
 
   // 1. Update the keybindings according to the current keyboard layout
 

src/editor-mathfield/render.ts

@@ -33,6 +33,13 @@ export function requestUpdate(
   mathfield: MathfieldPrivate,
   options?: { interactive: boolean }
 ): void {
+  // console.log(
+  //   'render.ts > \n\t 🔨 requestUpdate >  mathfield:',
+  //   mathfield,
+  //   '\n\t options >',
+  //   options
+  // );
+
   if (mathfield.dirty) return;
   mathfield.dirty = true;
   requestAnimationFrame(() => {
@@ -112,11 +119,18 @@ export function contentMarkup(
   //
   // 1. Update selection state and blinking cursor (caret)
   //
+
   const { model } = mathfield;
+  console.log('---render.ts------ contentMarkup > model > ', model);
+  // model.atoms.forEach((atom) => {
+  //   console.log('render.ts > [line 126] > atom.id:', atom.id);
+  // });
+
   model.root.caret = undefined;
   model.root.isSelected = false;
   model.root.containsCaret = true;
   for (const atom of model.atoms) {
+    console.log('atom:', atom);
     atom.caret = undefined;
     atom.isSelected = false;
     atom.containsCaret = false;
@@ -192,6 +206,7 @@ export function render(
   field.innerHTML = window.MathfieldElement.createHTML(
     contentMarkup(mathfield, renderOptions)
   );
+
   mathfield.fieldContent = field.getElementsByClassName(
     'ML__mathlive'
   )[0]! as HTMLElement;

test/smoke/index.html

@@ -43,8 +43,7 @@ <h1>Smoke Test</h1>
       </ul>
     </header>
     <main>
-      <math-field id="mf"
-        >1+\colorbox{blue}{$2$}+3+\colorbox{red}{4}+\colorbox{green}{\ensuremath{4}}+\text{5+\colorbox{purple}{6}}</math-field
+      <math-field id="mf"></math-field
       >
       <!-- <math-field id="mf">1+\colorbox{blue}{\ensuremath{2}}+1+2</math-field> -->
 
@@ -184,7 +183,9 @@ <h2>Latex to Speakable Text</h2>
       };
 
       mf.addEventListener('input', (ev) => {
-        console.log('input event');
+        // console.log('index.html > input event', ev);
+        // mf is a reference
+        // console.log("mf", mf);
         updateContent(mf);
       });
 
@@ -233,6 +234,8 @@ <h2>Latex to Speakable Text</h2>
       // Handler called when the mathfield content has changed
       //
       function updateContent(mf) {
+        console.log("**** updated content!!***");
+
         const latex = mf.getValue('latex-expanded');
         try {
           setHtml('latex', mf.getValue('latex-expanded'));
@@ -242,6 +245,7 @@ <h2>Latex to Speakable Text</h2>
           // setHtml('math-json', ce.parse(mf.value));
           setHtml('latex2speech', convertLatexToSpeakableText(mf.getValue()));
           const result = mf.expression?.evaluate().latex ?? '';
+          console.log('index.html > line 248 > result:', result);
           document.getElementById('result').innerText = result;
           document.getElementById('result-latex').innerText = `$$${result}$$`;