Nowa wersja edytora postów (i może i microblogów) na 4programmers.net

6

Dyskusja rozpoczęła się od tego wpisu: Czcionka monospace w widoku edycji artykułów w Kompendium

Zauważyłem że dla niektórych równie ważna jest czcionka "ludzka", jak dla innych czcionka monospace. Stwierdziełem, że nie ma powodu żeby obie strony nie były zadowolone, więc przystąpiłem do napisania nowej wersji edytora. Aktualna wersja to 1.0.39 i można z niej skorzystać i testować tutaj: https://danon.github.io/4programmers/ Aktualne feature'y to: kolorowanie składni markdown, kolorowanie składni kilku języków we fragmentach kodu, popularne skróty klawiszowe (shift do indentu kodu, powiększenia zaznaczenia jak w IDE od JetBrains, Alt+Up/Alt+Down do przesuwania linii).

Chciałem opisać progress edytora na mikroblogach; ponieważ wiem że 99% projektów umiera, ponieważ ludzie myślą że umarł. Poświęciłem już około 30h sumarycznie na ten edytorek; fajnie byłoby dodać brakujące feature'y i zacząć używać na 4programmers.net.

Proszę zaangażowanych o udzielanie się w tym poście, sugestie, jak ktoś znajdzie buga to proszę pisać tutaj; deploy'e są już zautomatyzowane, więc jeśli ktoś chce poprawkę nawet eksperymentalną to mogę wrzucić.

Fajnie byłoby usłyszeć feedback od większej części użytkowników, być może @Adam Boduch, @cerrato, @somekind, @Marooned, @no_solution_found i innych. Im wcześniej dostanę info że trzeba coś poprawić tym bardziej Agile ;D

Na stronie demo jest opisany changelog, ale może przytoczę go tutaj:

Do poprawienia:

  • Edycja toggle, kiedy zaznaczone jest tylko część elementu
  • Dodać sugestie od @somekind, dotyczącej wklejania linków

ChangeLog:

  • Dodano kolorowanie składni dla BrainFuck - "dzięki" @Marooned
  • Poprawiono buga kiedy Ctrl+Z nie cofał zmian (tzn cofał, ale na aktualny stan) - dzięki @no_solution_found
  • Dodano kolorowanie składni Go - dzięki @no_solution_found
  • Dodano kolorowanie składni YAML
  • Dodano kolorowanie składni JSON
  • Poprawiono buga z niepoprawnym lazy-loadingiem dialektów SQL - dzięki @Panczo
  • Dodano przesuwanie linii w górę i dół Alt+Up oraz Alt+Down
  • Dodano powiększanie zaznaczenia; jak w IDE od JetBrains (Ctrl+W, expand selection)
  • Dodano lazy-loading języków (tzn. język zostanie załadowany dopiero jak zostanie użyty w treści)
  • Dodano jednolity theme dla wszystkich języków (np. keyword zawsze będzie miał taki sam kolor).
  • Dodano kolorowanie składni dla wielu języków (extension CodeMirror), głównie żeby @furious_programming przestał męczyć.
  • Poprawiono buga z wykrywaniem blokow kodu podczas wycinania i wklejania.
  • Poprawiono buga z zaznaczeniem, które "zostawało" w tyle
  • Wciśnięcie Enter będąc w liście, automatycznie dodaje nowy element. Działa dla uporządkowanych i nieuporządkowanych list
  • Dodano debugger elementów markdownu (JSON z typami wartości)
  • Dodano kolorowanie składni
  • Poprawiono wykrywanie fragmentów kodu inline oraz block
  • Zmiana koloru zaznaczenia, bardziej pod 4programmers.net
  • Dodano instrukcje korzystania z edytora
  • Poprawiono wykrywanie kodu zarówno poprzez ``` jak i ~~~
  • Edycja schematu kolorów, żeby pasowała do 4programmers.net
  • Poprawiono błędne wklejanie linku
  • Dodatko skróty klawiszowe do funkcji
  • Poprawiono błędne wklejanie obrazka
2
TomRiddle napisał(a):

Aktualna wersja to 1.0.39 i można z niej skorzystać i testować tutaj: https://danon.github.io/4programmers/

Pod FF52 nie działa. Jeśli będzie wdrażana, sugeruję zachować możliwość wyboru edytora.

6
Freja Draco napisał(a):
TomRiddle napisał(a):

Aktualna wersja to 1.0.39 i można z niej skorzystać i testować tutaj: https://danon.github.io/4programmers/

Pod FF52 nie działa.

A "nie działa" to znaczy...?

Bo na taką odpowiedź to mam tylko "u mnie działa".

1

+1 za wątek, bo zaglądając na bloga raz na miesiąc można nie trafić na ciekawe info
Testy na FF92 (najnowszy - Freja, 52 to nie jakiś archaizm? Czyżby ostatni z XUL? To by miało sens, też mi brakuje gazyliona rozszerzeń)

  1. Pewnie nigdy nie skorzystam z tego ctrl+q, ale skoro już jest, to umieść kursor na końcu linii z <?= $xx ?>, pierwsze ctrl+q zaznacza wszystko, drugie już tylko dwie pierwsze linie.
  2. wykrywanie języka zaraz po 3 backtickach (przy okazji, nie ma escape char by wpisać backtick tutaj :D) rozumiem, że jest robione szukaniem ciągu? jsphp, jphps i phpjs wydaje się wykrywać język php
  3. wszelkie skróty ctrl+ są ryzykowne - np, wg instrukcji ctrl+b powinno pogrubiać, a na Firefoksie pokazuje sidebar z zakładkami, ctrl+h sidebar z historią, ctrl+i informacje o stronie, etc, żaden z nich nic nie robi w edytorze wbrew instrukcji - chyba bym nie ingerował w skróty systemowe (choć tu rzeczywiście zarzut do samej przeglądarki, że tak popularnych skrótów nie zostawiła wolnych)
  4. ctrl+q jest wspomniany dwa razy, raz ma robić zaznaczenie, raz cytat - sztuczna inteligencja ma się domyślić z kontekstu? ;-)
  5. ikony w toolbarze nie działają - zakładam, że to mockup

To tak na szybko

2

a będzie vim mode? :D

2
TomRiddle napisał(a):
Freja Draco napisał(a):
TomRiddle napisał(a):

Aktualna wersja to 1.0.39 i można z niej skorzystać i testować tutaj: https://danon.github.io/4programmers/

Pod FF52 nie działa.

A "nie działa" to znaczy...?

Bo na taką odpowiedź to mam tylko "u mnie działa".

17:05:55.227 SyntaxError: invalid identity escape in regular expression  main.1693684dbb058c234976.js:1200:18
    ["./node_modules/@lezer/markdown/dist/index.js"] https://danon.github.io/4programmers/main.1693684dbb058c234976.js:488:1
    __webpack_require__ https://danon.github.io/4programmers/main.1693684dbb058c234976.js:64:12
    <anonimowa> webpack:///./node_modules/@codemirror/lang-markdown/dist/index.js?:11:73
    ["./node_modules/@codemirror/lang-markdown/dist/index.js"] https://danon.github.io/4programmers/main.1693684dbb058c234976.js:308:1
    __webpack_require__ https://danon.github.io/4programmers/main.1693684dbb058c234976.js:64:12
    <anonimowa> webpack:///./src/components/Editor/markdown.js?:2:83
    ["./src/components/Editor/markdown.js"] https://danon.github.io/4programmers/main.1693684dbb058c234976.js:691:1
    __webpack_require__ https://danon.github.io/4programmers/main.1693684dbb058c234976.js:64:12
    <anonimowa> webpack:///./src/components/Editor/Editor.vue:5:70
    ["./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js?!./src/components/Editor/Editor.vue?vue&type=script&lang=js&"] https://danon.github.io/4programmers/main.1693684dbb058c234976.js:512:1
    __webpack_require__ https://danon.github.io/4programmers/main.1693684dbb058c234976.js:64:12
    <anonimowa> webpack:///./src/components/Editor/Editor.vue?:2:189
    ["./src/components/Editor/Editor.vue?vue&type=script&lang=js&"] https://danon.github.io/4programmers/main.1693684dbb058c234976.js:631:1
    __webpack_require__ https://danon.github.io/4programmers/main.1693684dbb058c234976.js:64:12
    <anonimowa> webpack:///./src/components/Editor/Editor.vue?:3:94
    ["./src/components/Editor/Editor.vue"] https://danon.github.io/4programmers/main.1693684dbb058c234976.js:619:1
    __webpack_require__ https://danon.github.io/4programmers/main.1693684dbb058c234976.js:64:12
    <anonimowa> webpack:///./www/app.js?:5:91
    ["./www/app.js"] https://danon.github.io/4programmers/main.1693684dbb058c234976.js:715:1
    __webpack_require__ https://danon.github.io/4programmers/main.1693684dbb058c234976.js:64:12
    <anonimowa> https://danon.github.io/4programmers/main.1693684dbb058c234976.js:199:18
    <anonimowa> https://danon.github.io/4programmers/main.1693684dbb058c234976.js:1:11

@Marooned

Freja, 52 to nie jakiś archaizm? Czyżby ostatni z XUL? To by miało sens, też mi brakuje gazyliona rozszerzeń)

Ostatni z XUL był chyba 55, ale tylko wersję 52 później wspierano.
Ze statystyk wynika, że 1/5 użytkowników FF nadal siedzi na tej wersji.

0

Dodano powiększanie zaznaczenia; jak w IDE od JetBrains (Ctrl+W, expand selection)

<hehehehe> a gdyby to było konfigurowalne? </hehehehe>
0
Marooned napisał(a):

Pewnie nigdy nie skorzystam z tego ctrl+q, ale skoro już jest, to umieść kursor na końcu linii z <?= $xx ?>, pierwsze ctrl+q zaznacza wszystko, drugie już tylko dwie pierwsze linie.

To ma więcej sensu w kodzie wielolinijkowym. W takim inline, to faktycznie nie ma sensu. Proponujesz żeby to jakoś zablokować?

wykrywanie języka zaraz po 3 backtickach (przy okazji, nie ma escape char by wpisać backtick tutaj :D) rozumiem, że jest robione szukaniem ciągu?

Sorry, nie rozumiem o co chodzi? Mógłbyś wyjaśnić?

jsphp, jphps i phpjs wydaje się wykrywać język php

Wykrywanie języka działa tak: if (/php/.test(, potem if (/js/.test(, etc. Mogę dodać ^ oraz $ jeśli trzeba, lub jakoś to obejść.

wszelkie skróty ctrl+ są ryzykowne - np, wg instrukcji ctrl+b powinno pogrubiać, a na Firefoksie pokazuje sidebar z zakładkami, ctrl+h sidebar z historią, ctrl+i informacje o stronie, etc, żaden z nich nic nie robi w edytorze wbrew instrukcji - chyba bym nie ingerował w skróty systemowe (choć tu rzeczywiście zarzut do samej przeglądarki, że tak popularnych skrótów nie zostawiła wolnych)

No to sugerujesz żeby były z Alt? Czy żeby w ogóle nie było skrótów?

Faktycznie teraz skróty nie działają; coś zepsułem; ale u mnie normalnie skróty z edytora brały górę nad skrótami przeglądarki. Jak Ci się wydaje?

  1. ctrl+q jest wspomniany dwa razy, raz ma robić zaznaczenie, raz cytat - sztuczna inteligencja ma się domyślić z kontekstu? ;-)
  2. ikony w toolbarze nie działają - zakładam, że to mockup

No tak, trzeba to poprawić

1
TomRiddle napisał(a):
Marooned napisał(a):

Pewnie nigdy nie skorzystam z tego ctrl+q, ale skoro już jest, to umieść kursor na końcu linii z <?= $xx ?>, pierwsze ctrl+q zaznacza wszystko, drugie już tylko dwie pierwsze linie.

To ma więcej sensu w kodzie wielolinijkowym. W takim inline, to faktycznie nie ma sensu. Proponujesz żeby to jakoś zablokować?

Chodziło mi o to, że po kroku, gdzie mamy zaznaczone wszystko, kolejny ctrl+q zamiast "expand" zmniejsza zaznaczenie do losowych 2 pierwszych linii, taki mikro bug

jsphp, jphps i phpjs wydaje się wykrywać język php

Wykrywanie języka działa tak: if (/php/.test(, potem if (/js/.test(, etc. Mogę dodać ^ oraz $ jeśli trzeba, lub jakoś to obejść.

A no właśnie, czyli jak wspomniałem, szukanie ciągu, dlatego trololophpyeah wykryje php - ot, taka ciekawostka, ale chyba dodałbym ^php$ by nie było problemu, jeśli zajdzie potrzeba rozróżnienia kolorowania np. html vs html5 czy python vs python3 (w co wątpię, by miało sens i kiedykolwiek nastąpiło)

wszelkie skróty ctrl+ są ryzykowne - np, wg instrukcji ctrl+b powinno pogrubiać, a na Firefoksie pokazuje sidebar z zakładkami, ctrl+h sidebar z historią, ctrl+i informacje o stronie, etc, żaden z nich nic nie robi w edytorze wbrew instrukcji - chyba bym nie ingerował w skróty systemowe (choć tu rzeczywiście zarzut do samej przeglądarki, że tak popularnych skrótów nie zostawiła wolnych)

No to sugerujesz żeby były z Alt? Czy żeby w ogóle nie było skrótów?

Nie wiem. Z jednej strony ctrl+b fajnie, jakby dało bold, ale z drugiej jak mi jakaś strona kradnie ctrl+f by odpalać swoją własną wyszukiwarkę, która oczywiście krzywo działa, to mnie nosi. Ale może ma sens, by te skróty działały na składnie jeśli kursor jest w edytorze i tylko wtedy.

0

Nie koloruje pascal-a

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0