csPlugin: `buttons`-toimintoon Markdown-tuki

[dezhidki]

• [x] MarkDown mdButtons
• [ ] items-attribuutti mdButtons
• [ ] placeholder-attribuutti editorTempaltes
• [ ] editorTempates myös editoriin (jos haluaa toiminnot editorin yläpuolelle) tai molempiin

Esimerkiksi voitaisiin sallia kolme syntaksia:

1. Merkkijono

buttons:
  - "md: *Teksti*"
  - "md: **Teksti**"

2. Lista:

buttons:
  - [ "md: **Teksti**", "**Teksti**", "Lihavoitu" ]
  - [ "md: *Teksti*", "*Teksti*", "Kursiivi" ]

3. Pitkä:

buttons:
  - template: "**Teksti**"
    buttonText: "md: **Teksti**"
    title: "Lihavoitu"
  - template: "\\1 + \\2"
    buttonText: "md: $a + b$"
    placeholders:
      - default: a
        prompt: "Mitä summataan?"
        pattern: "[A-z0-9]+"
        error: "Pitää olla kirjain tai numero"
      - default: b
        prompt: "Mihin summataan?"
        pattern: "[A-z0-9]+"
        error: "Pitää olla kirjain tai numero"

Ajatuksena on se, että YAML-syntaksin kanssa md:-arvot saadaan jo prosessoitua palvelimen puolella etukäteen.

Pohdittavaa:

1. Tarvitaanko nyt nämä kaikki esitysmuodot? Nämä pitäisi onnistua määrittämään käyttämällä Pythonissa tyyppiä list[str] | list[tuple[str, str, str]] | list[ButtonOptions], missä ButtonOptions on oma dataclass. Toisaalta kolme eri tyyliä joutuisi ensin parsimaan jotenkin palvelimen tai selaimen puolella erikseen. Sinänsä riittää, että edes tuo (2) toimisi.

2. buttons on jo käytössä, joten pitänee keksiä uusi nimi parametrille.

[dezhidki]

In GitLab by @vesal on Feb 21, 2022, 18:18

Mikäs jos siis antaa tuon vanhan buttons olla kun sille on jo käsittely ja tekee uuden mdButtons jolloin voi antaa MD-käsittelyn ja silloin palvelinpuolella ei tarvitse ymmärtää muuta kuin tuo msButtons. Molemmat käsitellään selaimen päässä, ensin buttons ja sitten msButtons. Käyttäjä valitsee mitä syntaksia käyttää. Ja mdButtons tukee vain tuota laajinta syntaksia.

[dezhidki]

Joo, voi se näinkin toimia

[dezhidki]

In GitLab by @vesal on Feb 27, 2022, 16:46

Vaihdan syntaksiehdotuksen vastaamaan tuota:

https://tim.jyu.fi/view/tim/TIM-ohjeet#editor_templates

Eli

mdButtons
  - text: "md: **Teksti**"
    data: "**Teksti**"
    expl: "Lihavoitu"
  - text: "md: $a + b$"
  - data: "\\1 + \\2"
    placeholders:
      - default: a
        prompt: "Mitä summataan?"
        pattern: "[A-z0-9]+"
        error: "Pitää olla kirjain tai numero"
      - default: b
        prompt: "Mihin summataan?"
        pattern: "[A-z0-9]+"
        error: "Pitää olla kirjain tai numero"

Varataan samalla mahdollisuus myös tuolle items, jolloin voisi tehdä avautuvia painikkeita esim jos tekisin oikein paljon matemaattisia symboleja valmiiksi, voisi ryhmitellä niitä.

Kursorin paikka on jo toteutettu ja se tulee ⁞ -merkistä.

[dezhidki]

In GitLab by @vesal on Feb 27, 2022, 20:12

Nyt on toteutettu tuon syntaksin yksitasoinen versio (ei items) csPlugin.ts. Puuttu vielä palvelinpään toteutus. Pitäisikö siellä jopa ilman DM-määrettä käsitellä tietyt attribuutit?

Itse asiassa md:n kanssa jos palevlimen pään muutokset tehdäänkin, mutta ne eivät jostakin syystä (??) toimi selaimen päässä? Jokin html:n sanitointijuttu?

EDIT: pitikin vaihtaa että on innerHtml.

Eli enää puuttuisi tuo items ja sen käsittely ts-koodissa.

[dezhidki]

Nuo data ja text taitavat mennä koodissa nyt toisinpäin kuin tässä esimerkkimarkupissa. Omassa kokeilussa siis

mdButtons:
  - text: "**Teksti**"
    data: "md: **Teksti**"
    expl: "Lihavoitu"

Ei tehnyt Teksti-painikkeen tekstistä lihavaa, vaan

mdButtons:
  - text: "md: **Teksti**"
    data: "**Teksti**"
    expl: "Lihavoitu"

Mutta tosiaankin kesti ainakin hetken itselläni tajuta, että text on siis painikkeen teksti ja data on teksti, joka syötetään tektikenttään :) Miltä kuulostaisi, että olisi text:n sijaan button ja data:n sijaan text/insert? Jos nyt oikein haluaa, että on pakko olla alle 5 merkkiä, niin jopa data:n sijaan tmpl (sanasta template)?

[dezhidki]

In GitLab by @vesal on Feb 28, 2022, 08:56

Mutta tosiaankin kesti ainakin hetken itselläni tajuta, että text on siis painikkeen teksti ja data on teksti, joka syötetään tektikenttään :) Miltä kuulostaisi, että olisi text:n sijaan button ja data:n sijaan text/insert? Jos nyt oikein haluaa, että on pakko olla alle 5 merkkiä, niin jopa data:n sijaan tmpl (sanasta template)?

Joo, mutta olisi hyvä päästä yhteensopivuuteen sen Editorin painikkeiden tekemisen kanssa niin että noita voisi jopa copy/pasteta keskenään.

Vaihtoehtoja:

1) mdButtons käyttää editin templaten syntaksia (kuten nyt) 2) syntaksia vaihdetaan 2.1) Kaikki olemassa olevat muutetaan (onko iso homma)? 2.2) Editor-templatessa sallitaan rinnakkainen syntaksi ja ohjeet vaihdetaan uuden mukaiseksi

csPluginnin sivuilla

https://tim.jyu.fi/view/tim/ohjeita/csPlugin#mdbuttons

sentään oli oikeinpäin tuo ohje

Niin ja ajan kanssa laajentaisin tuon placeholder myös editorin templateihin koska sielläkin voisi sillä olla käyttöä.

Joka tapauksessa tuon \? voi vielä ehkä korvata \1, \2 jos se tuntuisi paremmalta. Jolloin jopa olisi niin, että sen korvattavan voisi antaa placeholderissa esim

placeholder:
   - default a
     find: {a}
     ....

[dezhidki]

Onkos se edes mitenkään yleinen/haluttu asia, että lohkoeditorin painikkeet ja cspluginin tehtäväpainikkeet voi copypasteta keskenään?

Mutta olkoon tuo syntaksi näin. Ei se ole sitten aikanaan mahdoton homma muuttaa, joutuisi vain kirjoittamaan jonkun migraatioskriptin, jolla samalla päivitetään syntaksi kaikissa dokumenteissa.

[dezhidki]

In GitLab by @vesal on Feb 28, 2022, 09:31

Onkos se edes mitenkään yleinen/haluttu asia, että lohkoeditorin painikkeet ja cspluginin tehtäväpainikkeet voi copypasteta keskenään?

No esim jos tehtäisiin hyvä settin TeXiä varten, missä on "kaikki" perusmatikka. Silloi olisi järkevää ylläpitää vain yhtä settiä. Toki sitä ennen ptiää laajnetaa tuo items toimimaan mdButtons ja kääntäen placeholders toimimaan editorin tempateissa.

Sitten voi olla sivuja joissa pitäisi välillä kirjoittaa editorilla ja välillä tehdä tehtäviä ja sillion olisi hyvä että voi olla samoja toimintoa käytössä. Josta herääkin kysymys, että pitäisi olla optio sijoittaa mdButtons (tai sen eri nimellä oleva rinnakkainen versio) edit-alueen päälle kuten "oikeassa editorissa"?

Mutta olkoon tuo syntaksi näin. Ei se ole sitten aikanaan mahdoton homma muuttaa, joutuisi vain kirjoittamaan jonkun migraatioskriptin, jolla samalla päivitetään syntaksi kaikissa dokumenteissa.

Täytyy tuonne csPlugin ohjeeseen avata nuo kentät tarkemmin että mikä tekee mitä. Ja ehkä tehdä editoriin tuolle yksi valmis template, niin silloin sotkemisen vaara pienee himpun.

[dezhidki]

Josta herääkin kysymys, että pitäisi olla optio sijoittaa mdButtons (tai sen eri nimellä oleva rinnakkainen versio) edit-alueen päälle kuten "oikeassa editorissa"?

Voisihan se periaatteessa, jos joku vaikka haluaa painikkeet lohkoeditorin tapaan editorin yläpuolelle. Toisaalta ihan hyvin ne toimivat nytkin.