# /Web会議室/エディタ拡張(BS4 Grid追加編集モーダル)

### 懸念点
自分たちが使用しようとしているライブラリの使用がわかっていない
- EDN は果たして必要なのか否なのか
    - 実装タスクを着手する前に調査タスクが必要
    - **shoelace**果たして使っていいのか

## 要件

- エディターアイコンのボタンを押すことでモーダルが開きBS4を元にしたGridを編集できる。

## 新規作成

- エディタアイコンのGridボタンを押すことでモーダルを開きBS4のコードを元にGridを編集できる
    - イメージではこんなアイコン
    - ![image.png](/attachment/5ed4a898b344620048b2efe1)
- 複雑な構成を避けるためrow一つに対してこのモーダルを表示するようにする。
- 見た目に関して
    - ベースになる12等分のコラムが薄く表示されている状態
    - 各ディスプレイサイズを選択できる。
        - モバイル版(xs)
        - タブレット版(sm)
        - デスクトップ版(md)
        - ラージデスクトップ版(lg)
    - クリック＆ドラックしてcolの大きさを決める
        - 表示されたcolを左右に動かすことによって
            - 選択されたcolの位置の移動
            - offsetをきめることができる。
    - rowを選択して名前を付けることができる
    - colを選択して
        - 名前を付けることができる
        - そのcolを削除することができる
- 最後に生成するボタンでBS4のコードを自動生成する
- 再編集する時
    - tableのモーダルと同じようにRowの範囲内に入力カーソルを当ててアイコンをクリックすると再編集モーダルが表示される。
## 参考にしたもの
- Bootstrap Grid System
    - https://getbootstrap.com/docs/4.5/layout/grid/

- 参考にしたUI
    - https://github.com/erikflowers/shoelace-io
    - http://shoelace.io/
![image.png](/attachment/5ed49f23b344620048b2efd7)

## 自動生成されるbs4のクラス達
 - `col`
     - `col-xs-{number}`, `col-sm-{number}`, `col-md-{number}`, `col-lg-{number}`
 - `row`
 - `offset`
     - `offset-xs-{number}`, `offset-sm-{number}`, `offset-md-{number}`, `offset-lg-{number}`

## ファイル名・トピックブランチ名等

- ファイル名
    - `src/client/js/components/PageEditor/GridEditModal.jsx`
    - `src/client/js/components/PageEditor/CodeMirrorEditor.jsx`
- トピックブランチ名
    - `feat/grid-edit-modal-for-master-merge`





---

## Page Navigation

- Canonical URL: https://dev.growi.org/Web会議室/エディタ拡張(BS4%20Grid%20追加編集モーダル)
- Permalink: https://dev.growi.org/5ed4953a82bb800048bcca3d
- Parent: [Web会議室](/5cefb480b2741f003e99e8ed.md)
- Children: 4 total
  - [7月6日mtg](/5f02d0f7c84dc30048878719.md)
  - [colのドラッグ&ドロップについて](/5f0449623e9ccb0048ee5a59.md)
  - [路線変更詳細](/5f067a7f35ac9d00489712c4.md)
  - [配列の設定](/5f057936f9b07b00481735d3.md)
- Total descendants: 4
- Siblings: 50 of 77 total (27 more not shown; see the page list API below for the full listing)
  - [20190507_ユーザー権限](/5cd13ddc19d48b0041400f4f.md)
  - [20190508_ExternalGroup実装案](/5cd3b02d091bdc00486b2f42.md)
  - [20190514_growi本体のi18n対応](/5cdba7c858e536003e600d2e.md)
  - [20191105_Graceful_Shutdown](/5dc0841e6a6f6c00451c001c.md)
  - [20200303GROWI_SSO ミーティング](/5e5e003e08a0240048f45c8b.md)
  - [20200310_GlobalNotification改善方針](/5e65cbe6fabb520048375b8d.md)
  - [20200408_ブラウザ上のユーザーキャッシュ改善](/5e8d6bb76eb1f40048f15e7c.md)
  - [20200415_checkboxとswitchの使い分け](/5e9669ef26fe880048818325.md)
  - [20200507_デザイン会議](/5eb3d8bad9aa840049ac469d.md)
  - [20200518_デザイン会議](/5ec25c27f973560048b488eb.md)
  - [20200519_Dev4.0.0リリース会議](/5ec37dc0d564590049128d51.md)
  - [20200611_Slackbot_with_proxy_において複数GROWIがmodalを開く場合の挙動の検討](/60c2ed8d16d1d700499030cc.md)
  - [20200617_デザイン棚卸し会議](/5ee9e65f55b35b004868b07c.md)
  - [20200706_ページのBulk出力機能](/5ed0cc5dee4bc900481b55ea.md)
  - [20201127_ワンタイムURL](/5fc081f066f668004809e402.md)
  - [20201216_PageHistoryの最下段の差分が表示されない問題](/5fd9e63121ebf10048db6a4a.md)
  - [20210128_Component設計(v5.x 版)](/6012c0e836a5d4004841ba81.md)
  - [20210325_再起的な移動・複製で起こる問題について](/605c1134c11be80048edf4f1.md)
  - [20210608_同時編集機能付きエディタ考](/5cfe2858c736ef004312fa08.md)
  - [20210608_新施策検討会議](/60beec24d3095c00492610ff.md)
  - [20210610_脆弱性_プレゼント企画](/60c1af36ac882c00494c3b3f.md)
  - [20210614_開発チームからの悩みを共有する会](/60c6ddaee7e18a0049709bbb.md)
  - [20210622_URLのエンコーディングについて](/60d15eff4519360049ea4ef0.md)
  - [20210701_officialbot_動作確認](/60dd358295b42f00492afa56.md)
  - [20210707_toggetterコマンド要件策定](/60e518e7d6ed770049d085e1.md)
  - [20210709_toggetterコマンド要件策定](/60e7be79ce96810049bc4100.md)
  - [20210719_togettercommandの障壁を検討する](/60f4fd1ef7ea2b005128e2c3.md)
  - [20210721_ストーリー設計](/60f66480f16063005273a9a4.md)
  - [20210803_  OpenWikiのOGPを表示できるようにする](/6108e608f508da00510b41a9.md)
  - [20210806_TextLint仕様検討](/610d183f474cd10051c5b522.md)
  - [20210902](/6130afcd6940de0051899a68.md)
  - [20210906_Productionへのassert導入メモ](/6135123691096100511e4d22.md)
  - [20211008_添付ファイル内の全文検索](/615f9c0874b84442a6928a9a.md)
  - [20211224_アクセストークン拡張](/61c5502334ebb98c673d340b.md)
  - [20211224_検索_pagetree_ストーリー棚卸](/61c5808234ebb98c673d98b1.md)
  - [20220111_脆弱性対応](/61dd568920ad6b99c50646a0.md)
  - [20220112_VRTで撮りたいスクリーンショットメモ](/61dedb5e47136624e9b5bed1.md)
  - [20220315_issue-5409](/623009e98469ca4087435498.md)
  - [20220325_編集画面改善施策プランニング会議](/623d67e06fabaab0cd333e45.md)
  - [20220411_GROWI_Docs_棚卸し](/62341b887abe595637091e09.md)
  - [20220510_TypeScript化](/6279e91bd5f269990fb58844.md)
  - [20220620_TypeScript4.2から4.6へのバージョンアップ](/62b0756e136b9852add5b9fb.md)
  - [20220622_issue-3597 修正案](/60d165de4519360049ea51cf.md)
  - [20220623_TypeScript化に関する方針決め](/62b40e98787452ec2d868741.md)
  - [20220711_editデザイン共有会](/62cbcb5f26173a0cf355af1b.md)
  - [20221014_ライブラリアップデートレビュー会](/63491b4fb9a79213018836ac.md)
  - [20221021_next化認識合わせ](/635219fafa65f8ac622d0757.md)
  - [20221125_markdown_xss_v6](/63807d7af21dbeeef1f1a32a.md)
  - [20221227_ブックマークフォルダ施策(Gruneさん)](/63aad4544dc1c1e4bd6f11d6.md)
  - [2022_1208 useTermNumberManager について考える](/639188813887047c18843a78.md)
- Last updated: 2023-08-25T03:07:07.269Z by kosei-n
- Full page listing (all children regardless of count): https://dev.growi.org/_api/v3/page-listing/children?id=5ed4953a82bb800048bcca3d