あとでまとめる。
  • -

エディター Edit

:t/エディターより Edit

未分類 Edit


あとで:t/エディターを追加。

全画面テキストエリア Edit


全画面テキストエリアにフローティングなツールパレット。パレットは移動できなくてもいいが、移動できるならブラウザーに位置などの表示状態保存

広く見せる。

パレットを非表示にした上に全画面表示にすればテキストエディターっぽく。

ここでは明暗両方のスタイルテーマを選べるように

FoldingElement Edit


編集と閲覧を統合するなら、行や段落に属性を付けてフィルタリングできるように。

コメント/感想/スレッドモードよりの発言

見出し

見出し属性の一つ

とすると、ページ要素別のFoldingTextになる。

たくさんある要素ほど消したくなるので、スイッチは多い順に押しやすくする。

UI Edit


3列

エディターの右にあと2列

左からエディター・メモとクリップ・関連情報プッシュ

プッシュ用は自動更新・ユーザーにとっては読み取り専用

で、段落をドラッグドロップして列間を移動させたい。

3列目から拾い上げて、2列目に取っておく。

1列目からも2列目に退避しておいたり。

2列目から適宜1列目にドロップ。

この列は永続化される。利用者ページか、その下位に。

3列目にプッシュするときは最下行に。上にせり上がる。すると1列目と同じように下に伸びていくことになる。ユーザー視点だと1列目のあのあたりを考えていた時に見たのは…→思い出しやすい。

エディター記法定義 Edit


記法を好きなだけ増やせるなら、括弧と選択のマークアップエディターとは相性が悪い

記法定義排除?リストから選んで利用。

→このエディターを使わない時のためにする?エディター記法は両立可能だけど、「記法を排してシンプルにする」のには合わない。

書いてるときでも直近の見出しは常時表示 Edit

編集ビューはシングルトン Edit


他の(Webブラウザー)タブで編集ビューを開くと既存のビューに統合、ページ2つ編集状態の同じビューが2つになる。

横フリックで切り替え。

隠し文字 Edit


つまりコメント

自分へのコメント、誰かへのコメント

閲覧時に見えない・間隔も詰める。

括弧だけ記法 Edit


に学習

括弧の中身→装飾の傾向を学習

自動判別。括弧を閉じたり括弧書きをタップしたときの選択作業を自動化

書けば伸びる Edit


縦に

画面いっぱいに伸び切ったら見えなくなった側をフェードアウト、端ではないことを示す

編集の仕方 Edit


体裁をつけたあとは編集しづらい

キーボードは文字編集と括弧付けだけ。体裁パレットはあくまでタップ/クリックで表示/非表示

フルスクリーンになったら余計なものを隠す Edit


:i/参考に/Fullscreen API

これとは別にブラウザーでのF11に対応するためScreen.WidthとWindow.innterWidthが一致しているかどうかも判定しないといけない?

テンプレート使用時はプレーンエディターでいい Edit


リッチなほうを使えたらそれに越したことはないけど。体裁はテンプレートの方にあるのでこっちでは必須ではない。

見出しドラッグでFolding Edit


†:TaskPaperのように。

ドロップすると展開。戻る。

スタイルギャラリー Edit


色を選ぶ・太字や斜体にする…ではなくいろいろな体裁を並べたプレビュー集にする。

http://kachibito.net/web-design/css3-text-shadow-sample.html

一列に並べて。列を増やしたりも。新しい列には利用者が自分で配置。

参考に Edit


range - DOM | MDN

マークアップエディターとクリーンエディター Edit


スタイルエディター」と「マークアップエディター」のほうがいいかも知れない。

マークアップのほうのエディター Edit


記法は括弧だけ。

それでマークアップ範囲作成。あとから範囲にスタイル付け。

括弧以外にカーソルで範囲選択をしても一時的な範囲を作れる。スタイル付けすると定着。スタイル付けしなければカーソル移動で消滅。

構造を崩さないようにするため、Rangeのstart-endは同じノードでなければならない。カーソルを使った範囲指定は構造を崩す可能性がある。

構造が崩れそうなときの対処…
  • 崩させない。操作を拒否
  • 上書きして、矛盾するRangeを分割
    一般的なWYSIWYGの挙動。同じスタイルが連続すると連結して1つになるようにして、やり直しをしやすくする。
  • 上書きされたほうのRangeを全て消滅させる

HTMLレンダリングをする層と、テキストとRangeでできてる層の2層構造。

保存するのはテキストのほう。ただしテキストとRangeとスタイル選択で作ったページ/要素のパラメーターを送信、サーバー側でそれを復元して要素を保存。再編集時は要素からテキストを生成してそれを。

テーブルやリストを入れるなら、別の操作系になってもいい。

そういったものの呼び出しは右クリックやダブルクリックやショートカットキーで表示させた一覧から選ぶ。

1つの操作から1つの一覧表示。

:i/テーブルはレイアウト用のテンプレート

他の方法で作られた複雑なページをこのエディター編集するには?
  • -

これをスタイル付け専用にして「スタイルエディター」という呼び方に。意味付けは使われないのでできなくていい。

クリーンなほうのエディター Edit


†:FoldingText

こっちを「マークアップエディター」と呼ぶように。記法が有効になる。

エディターの問題点 Edit

記法や要素はネストしている Edit


ネストしているので、全体を一度にHTML変換→全体を再描画しないといけない。

最上位の要素が中身を全て持っていることになる。それらのコンテキストを作るのも最上位。ネスト構造のコンテキストは連動する。

最上位要素だけは外して、エディター側で偽物を用意すれば部分的に描画できる。最上位要素は決まっているので用意する偽物は1つだけ。でも相変わらずネストしているものはまとめて描画。

エディター/ Edit