feat: mobile toolbar basic UI (#8)

* chore: add mobile icon files

* chore: add AFMobileIcon and draft toolbar UI

* chore: move toolbar items out of MobileToolbar

assets/mobile/toolbar_icons/bold.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.48828 3.90625C7.65988 3.90625 6.98828 4.53823 6.98828 5.31823C6.98828 6.02423 6.98828 10.2592 6.98828 10.9652V18.4942C6.98828 19.2742 7.65988 19.9062 8.48828 19.9062C8.71218 19.9062 10.8837 19.9062 12.4883 19.9062C15.5259 19.9062 17.9883 17.5882 17.9883 14.7302C17.9883 13.1162 17.1954 11.6862 16.0192 10.7762C16.6546 10.0452 16.9883 9.15922 16.9883 8.14122C16.9883 5.80223 14.9735 3.90625 12.4883 3.90625C11.7348 3.90625 9.02118 3.90625 8.48828 3.90625ZM9.98828 6.73021C10.9796 6.73021 12.0174 6.73021 12.4883 6.73021C13.3167 6.73021 13.9883 7.36222 13.9883 8.14122C13.9883 8.92122 13.3167 9.5532 12.4883 9.5532C12.03 9.5532 10.9805 9.5532 9.98828 9.5532C9.98828 8.53821 9.98828 7.74421 9.98828 6.73021ZM9.98828 12.3772C10.9821 12.3772 12.0241 12.3772 12.4883 12.3772C13.869 12.3772 14.9883 13.4302 14.9883 14.7302C14.9883 16.0292 13.869 17.0822 12.4883 17.0822C11.4854 17.0822 10.8202 17.0822 9.98828 17.0822V12.3772Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/bulleted_list.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.99902 6.10352C2.44702 6.10352 1.99902 6.55152 1.99902 7.10352C1.99902 7.65552 2.44702 8.10352 2.99902 8.10352C3.55102 8.10352 3.99902 7.65552 3.99902 7.10352C3.99902 6.55152 3.55102 6.10352 2.99902 6.10352ZM6.99902 6.10352C6.44702 6.10352 5.99902 6.55152 5.99902 7.10352C5.99902 7.65552 6.44702 8.10352 6.99902 8.10352H20.999C21.551 8.10352 21.999 7.65552 21.999 7.10352C21.999 6.55152 21.551 6.10352 20.999 6.10352H6.99902ZM2.99902 11.1035C2.44702 11.1035 1.99902 11.5515 1.99902 12.1035C1.99902 12.6555 2.44702 13.1035 2.99902 13.1035C3.55102 13.1035 3.99902 12.6555 3.99902 12.1035C3.99902 11.5515 3.55102 11.1035 2.99902 11.1035ZM6.99902 11.1035C6.44702 11.1035 5.99902 11.5515 5.99902 12.1035C5.99902 12.6555 6.44702 13.1035 6.99902 13.1035H20.999C21.551 13.1035 21.999 12.6555 21.999 12.1035C21.999 11.5515 21.551 11.1035 20.999 11.1035H6.99902ZM2.99902 16.1035C2.44702 16.1035 1.99902 16.5515 1.99902 17.1035C1.99902 17.6555 2.44702 18.1035 2.99902 18.1035C3.55102 18.1035 3.99902 17.6555 3.99902 17.1035C3.99902 16.5515 3.55102 16.1035 2.99902 16.1035ZM6.99902 16.1035C6.44702 16.1035 5.99902 16.5515 5.99902 17.1035C5.99902 17.6555 6.44702 18.1035 6.99902 18.1035H20.999C21.551 18.1035 21.999 17.6555 21.999 17.1035C21.999 16.5515 21.551 16.1035 20.999 16.1035H6.99902Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/checkbox.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.99072 2.99829C4.78162 2.99829 2.99072 4.78929 2.99072 6.99828V16.9983C2.99072 19.2073 4.78162 20.9983 6.99072 20.9983H16.9907C19.1997 20.9983 20.9907 19.2073 20.9907 16.9983V6.99828C20.9907 4.78929 19.1997 2.99829 16.9907 2.99829H6.99072ZM6.99072 4.99829H16.9907C18.0957 4.99829 18.9907 5.89329 18.9907 6.99828V16.9983C18.9907 18.1033 18.0957 18.9983 16.9907 18.9983H6.99072C5.88612 18.9983 4.99072 18.1033 4.99072 16.9983V6.99828C4.99072 5.89329 5.88612 4.99829 6.99072 4.99829ZM15.9907 8.81029C15.7347 8.81029 15.4677 8.89728 15.2717 9.09228L11.5527 12.8103C11.2957 13.0683 11.0367 13.0513 10.8347 12.7483L9.83453 11.2483C9.52813 10.7883 8.88782 10.6603 8.42822 10.9673C7.96872 11.2733 7.84062 11.9133 8.14692 12.3733L9.14692 13.8733C10.0497 15.2263 11.8097 15.3983 12.9597 14.2483L16.7097 10.4983C17.0997 10.1073 17.0997 9.48227 16.7097 9.09228C16.5137 8.89628 16.2467 8.81129 15.9907 8.81029Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/code.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.3071 4.02869C13.7761 3.87769 13.2089 4.18468 13.0571 4.71668L9.05711 18.7167C8.90541 19.2477 9.21361 19.8147 9.74471 19.9667C10.2757 20.1177 10.8429 19.8107 10.9947 19.2787L14.9947 5.27869C15.1464 4.74769 14.8382 4.18069 14.3071 4.02869ZM6.83841 5.02869C6.58741 5.07869 6.33531 5.20567 6.18211 5.43567L2.18211 11.4357C1.98311 11.7337 1.95921 12.1147 2.11971 12.4357L5.11971 18.4357C5.36661 18.9287 5.96941 19.1507 6.46341 18.9037C6.95741 18.6567 7.17911 18.0537 6.93211 17.5597L4.18211 12.0917L7.86971 6.55969C8.17601 6.10069 8.04791 5.46069 7.58841 5.15369C7.35861 5.00069 7.08941 4.97869 6.83841 5.02869ZM18.3384 5.05969C18.0956 4.97969 17.8354 4.96768 17.5884 5.09168C17.0944 5.33868 16.8727 5.94167 17.1197 6.43567L19.8697 11.9037L16.1821 17.4357C15.8758 17.8947 16.0039 18.5347 16.4634 18.8417C16.9229 19.1477 17.5633 19.0197 17.8697 18.5597L21.8697 12.5597C22.0687 12.2617 22.0926 11.8807 21.9321 11.5597L18.9321 5.55969C18.8087 5.31369 18.5812 5.14169 18.3384 5.05969Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/divider.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.99805 11.0142C3.44605 11.0142 2.99805 11.4622 2.99805 12.0142C2.99805 12.5662 3.44605 13.0142 3.99805 13.0142H19.998C20.55 13.0142 20.998 12.5662 20.998 12.0142C20.998 11.4622 20.55 11.0142 19.998 11.0142H3.99805Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/h1.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.99121 3.92166C3.43891 3.92166 2.99121 4.36966 2.99121 4.92166V18.9216C2.99121 19.4736 3.43891 19.9216 3.99121 19.9216C4.54351 19.9216 4.99121 19.4736 4.99121 18.9216V12.9216H10.9912V18.9216C10.9912 19.4736 11.4389 19.9216 11.9912 19.9216C12.5435 19.9216 12.9912 19.4736 12.9912 18.9216V4.92166C12.9912 4.36966 12.5435 3.92166 11.9912 3.92166C11.4389 3.92166 10.9912 4.36966 10.9912 4.92166V10.9216H4.99121V4.92166C4.99121 4.36966 4.54351 3.92166 3.99121 3.92166ZM20.3662 3.98368C20.0182 3.83968 19.5875 3.88767 19.2724 4.20267L15.2724 8.20266C14.8819 8.59366 14.8819 9.24965 15.2724 9.64065C15.663 10.0306 16.3194 10.0306 16.71 9.64065L18.9912 7.35867V18.9216C18.9912 19.4736 19.4389 19.9216 19.9912 19.9216C20.5435 19.9216 20.9912 19.4736 20.9912 18.9216V4.92166C20.9912 4.47666 20.7142 4.12868 20.3662 3.98368Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/h2.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.01367 3.90625C2.46137 3.90625 2.01367 4.35425 2.01367 4.90625V18.9062C2.01367 19.4582 2.46137 19.9062 3.01367 19.9062C3.56597 19.9062 4.01367 19.4582 4.01367 18.9062V12.9062H10.0137V18.9062C10.0137 19.4582 10.4617 19.9062 11.0137 19.9062C11.5657 19.9062 12.0137 19.4582 12.0137 18.9062V4.90625C12.0137 4.35425 11.5657 3.90625 11.0137 3.90625C10.4617 3.90625 10.0137 4.35425 10.0137 4.90625V10.9062H4.01367V4.90625C4.01367 4.35425 3.56597 3.90625 3.01367 3.90625ZM18.0137 3.90625C15.8047 3.90625 14.0137 5.69724 14.0137 7.90623C14.0137 8.45823 14.4617 8.90623 15.0137 8.90623C15.5657 8.90623 16.0137 8.45823 16.0137 7.90623C16.0137 6.80124 16.9087 5.90624 18.0137 5.90624C19.1187 5.90624 20.0137 6.80124 20.0137 7.90623C20.0137 9.64023 19.3687 10.6142 17.2947 12.6872C14.8687 15.1142 14.0137 16.4732 14.0137 18.9062C14.0137 19.4582 14.4617 19.9062 15.0137 19.9062C16.1247 19.9062 20.1247 19.9062 21.0137 19.9062C21.5657 19.9062 22.0137 19.4582 22.0137 18.9062C22.0137 18.3542 21.5657 17.9062 21.0137 17.9062C20.3097 17.9062 17.8897 17.9062 16.2637 17.9062C16.5107 16.7402 17.1137 15.7432 18.7327 14.1252C21.1587 11.6982 22.0137 10.3392 22.0137 7.90623C22.0137 5.69724 20.2227 3.90625 18.0137 3.90625Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/h3.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.01465 3.90625C2.46265 3.90625 2.01465 4.35425 2.01465 4.90625V18.9062C2.01465 19.4582 2.46265 19.9062 3.01465 19.9062C3.56665 19.9062 4.01465 19.4582 4.01465 18.9062V12.9062H10.0146V18.9062C10.0146 19.4582 10.4626 19.9062 11.0146 19.9062C11.5666 19.9062 12.0146 19.4582 12.0146 18.9062V4.90625C12.0146 4.35425 11.5666 3.90625 11.0146 3.90625C10.4626 3.90625 10.0146 4.35425 10.0146 4.90625V10.9062H4.01465V4.90625C4.01465 4.35425 3.56665 3.90625 3.01465 3.90625ZM18.0146 3.90625C15.8056 3.90625 14.0146 5.69724 14.0146 7.90623C14.0146 8.45823 14.4626 8.90623 15.0146 8.90623C15.5666 8.90623 16.0146 8.45823 16.0146 7.90623C16.0146 6.80124 16.9096 5.90624 18.0146 5.90624C19.1196 5.90624 20.0146 6.80124 20.0146 7.90623C20.0146 9.14923 19.2616 10.1632 17.5766 11.0002C17.1826 11.1962 17.0226 11.6112 17.0136 11.9092C17.0046 12.2082 17.1346 12.5842 17.5766 12.8122C19.2496 13.6742 20.0146 14.6632 20.0146 15.9062C20.0146 17.0112 19.1196 17.9062 18.0146 17.9062C16.9096 17.9062 16.0146 17.0112 16.0146 15.9062C16.0146 15.3542 15.5666 14.9062 15.0146 14.9062C14.4626 14.9062 14.0146 15.3542 14.0146 15.9062C14.0146 18.1152 15.8056 19.9062 18.0146 19.9062C20.2236 19.9062 22.0146 18.1152 22.0146 15.9062C22.0146 14.2792 21.2666 12.9522 19.9196 11.9022C21.2276 10.9272 22.0146 9.53323 22.0146 7.90623C22.0146 5.69724 20.2236 3.90625 18.0146 3.90625Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/highlight_color.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0128 1.95312C16.641 1.95312 16.4226 2.1421 16.2757 2.2901L14.553 4.00311L13.699 3.25214C13.2282 2.78114 12.6075 2.54614 11.9904 2.54614C11.3733 2.54614 10.7227 2.8191 10.2518 3.2901L5.29412 8.2431C4.90412 8.6331 4.92082 9.27315 5.31092 9.66315C5.70092 10.0541 6.35262 10.0371 6.74272 9.64612L11.6855 4.69611C11.847 4.53411 12.0989 4.46214 12.295 4.66614L13.1261 5.4201L7.25543 11.2901C6.26343 12.2831 5.35122 13.6211 4.47752 15.1961C3.80882 16.4011 3.19013 17.6921 2.66722 18.9771C2.48442 19.4261 1.99902 20.7261 1.99902 20.9651C1.99902 21.2031 2.07752 21.4261 2.23032 21.6021C2.24542 21.6191 2.54022 21.9441 3.00042 21.9531L16.9624 21.9451C17.514 21.9451 17.9612 21.4981 17.9612 20.9451C17.9612 20.3931 17.514 19.9451 16.9624 19.9451L7.91592 19.9471C8.22302 19.7911 8.53502 19.6261 8.83302 19.4601C10.4056 18.5861 11.6906 17.6831 12.6811 16.6911L19.1785 10.2271L21.6755 7.69611C21.8173 7.55211 21.9973 7.40112 21.9978 6.94812C22.0002 4.97112 21.1934 3.76214 20.7013 3.25714C20.2092 2.75314 19.0105 1.95513 17.0128 1.95312ZM17.3793 3.99414C17.798 3.98114 18.8293 4.22309 19.2764 4.64709C19.7235 5.07209 19.9808 6.1751 19.9665 6.5921L18.7134 7.84412L16.0282 5.36511L17.3793 3.99414ZM14.602 6.7901L17.3113 9.24414L11.2506 15.2891C10.4095 16.1311 9.25383 16.9371 7.83003 17.7291C6.87103 18.2621 5.79322 18.7631 4.76182 19.2031C5.20072 18.1701 5.69282 17.1241 6.22542 16.1641C7.01642 14.7391 7.85862 13.5511 8.69912 12.7091L14.602 6.7901Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/italic.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0117 3.90625C10.4597 3.90625 10.0117 4.35425 10.0117 4.90625C10.0117 5.45824 10.4597 5.90624 11.0117 5.90624H12.6677L9.26171 17.9062H7.01172C6.45972 17.9062 6.01172 18.3542 6.01172 18.9062C6.01172 19.4582 6.45972 19.9062 7.01172 19.9062H13.0117C13.5637 19.9062 14.0117 19.4582 14.0117 18.9062C14.0117 18.3542 13.5637 17.9062 13.0117 17.9062H11.3557L14.7617 5.90624H17.0117C17.5637 5.90624 18.0117 5.45824 18.0117 4.90625C18.0117 4.35425 17.5637 3.90625 17.0117 3.90625H11.0117Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/link.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.43 1.95449C15.142 1.98749 13.899 2.58247 12.81 3.67247L11.281 5.20247C10.891 5.59247 10.891 6.21747 11.281 6.60747C11.671 6.99747 12.327 6.99747 12.717 6.60747L14.214 5.07747C15.663 3.62747 17.27 3.48247 18.863 5.07747C20.457 6.67147 20.312 8.27948 18.863 9.72948L15.837 12.7585C14.388 14.2085 12.781 14.3525 11.188 12.7585L10.751 12.3215C9.81001 11.3795 8.40502 12.7845 9.34702 13.7265L9.78402 14.1635C12.22 16.6015 15.063 16.3425 17.241 14.1635L20.267 11.1345C22.445 8.95548 22.704 6.11047 20.267 3.67247C19.049 2.45347 17.717 1.92249 16.43 1.95449ZM10.189 8.01247C8.98802 8.09047 7.81901 8.66648 6.75701 9.72948L3.73101 12.7585C1.29401 15.1965 1.55301 18.0415 3.73101 20.2205C5.90801 22.3995 8.75201 22.6585 11.188 20.2205L12.717 18.6905C13.107 18.3005 13.107 17.6755 12.717 17.2855C12.327 16.8955 11.671 16.8955 11.281 17.2855L9.78402 18.8155C8.19002 20.4105 6.58402 20.2655 5.13502 18.8155C3.68602 17.3655 3.54102 15.7585 5.13502 14.1635L8.16102 11.1345C8.89602 10.3995 9.62202 10.0555 10.314 10.0105C11.151 9.95549 12.029 10.3525 12.81 11.1345L13.247 11.5715C13.637 11.9615 14.261 11.9615 14.651 11.5715C15.041 11.1815 15.041 10.5565 14.651 10.1665L14.214 9.72948C13.057 8.57148 11.663 7.91547 10.189 8.01247Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/numbered_list.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.21685 5.21492L3.09185 6.33992C2.98045 6.45092 2.98045 6.66593 3.09185 6.77693C3.20315 6.88893 3.38675 6.88893 3.49805 6.77693L4.15435 6.12093V8.83992C4.15435 8.99692 4.27815 9.12093 4.43555 9.12093C4.59295 9.12093 4.71685 8.99692 4.71685 8.83992V5.40193C4.71685 5.14793 4.39635 5.03492 4.21685 5.21492ZM7.99805 6.12093C7.44575 6.12093 6.99805 6.56893 6.99805 7.12093C6.99805 7.67293 7.44575 8.12093 7.99805 8.12093H20.9981C21.5504 8.12093 21.9981 7.67293 21.9981 7.12093C21.9981 6.56893 21.5504 6.12093 20.9981 6.12093H7.99805ZM4.12305 10.1209C3.49335 10.1209 2.99805 10.6419 2.99805 11.2769C2.99805 11.4359 3.12185 11.5579 3.27935 11.5589C3.43675 11.5589 3.56055 11.4359 3.56055 11.2769C3.56055 10.9599 3.80825 10.6829 4.12305 10.6829C4.43895 10.6829 4.71935 10.9629 4.71685 11.2769C4.71415 11.6069 4.55555 11.7449 4.12305 12.0269C4.04635 12.0769 4.07845 12.0679 3.99805 12.1209C3.32265 12.5659 2.99635 12.9859 2.99805 13.8089C2.99835 13.9679 3.12165 14.1219 3.27935 14.1209H4.99805C5.15545 14.1199 5.27995 13.9989 5.27935 13.8399C5.27865 13.6809 5.15545 13.5579 4.99805 13.5589L3.74805 13.5269C3.82535 13.1799 3.87905 12.9159 4.27935 12.6519C4.35575 12.6019 4.38815 12.5779 4.46685 12.5269C5.04465 12.1499 5.27465 11.8519 5.27935 11.2769C5.28445 10.6419 4.75425 10.1209 4.12305 10.1209ZM7.99805 11.1209C7.44575 11.1209 6.99805 11.5689 6.99805 12.1209C6.99805 12.6729 7.44575 13.1209 7.99805 13.1209H20.9981C21.5504 13.1209 21.9981 12.6729 21.9981 12.1209C21.9981 11.5689 21.5504 11.1209 20.9981 11.1209H7.99805ZM4.15435 15.1209C3.66235 15.1209 3.21775 15.4439 3.06055 15.9019C3.01985 16.0209 2.99805 16.1499 2.99805 16.2769C2.99805 16.4349 3.12155 16.5579 3.27935 16.5589C3.43705 16.5589 3.56055 16.4349 3.56055 16.2769C3.56055 16.2129 3.57155 16.1489 3.59185 16.0899C3.67035 15.8609 3.90825 15.6829 4.15435 15.6829C4.46985 15.6829 4.71685 15.9619 4.71685 16.2769C4.71685 16.5929 4.46985 16.8399 4.15435 16.8399C3.99655 16.8399 3.84185 16.9629 3.84185 17.1209C3.84185 17.2789 3.99645 17.4019 4.15435 17.4019C4.46985 17.4019 4.71685 17.6489 4.71685 17.9649C4.71685 18.2799 4.46985 18.5589 4.15435 18.5589C3.83875 18.5589 3.56055 18.2799 3.56055 17.9649C3.56055 17.8069 3.43715 17.684 3.27935 17.683C3.12155 17.683 2.99805 17.8069 2.99805 17.9649C2.99805 18.5959 3.52305 19.1209 4.15435 19.1209C4.78545 19.1209 5.27935 18.5959 5.27935 17.9649C5.27935 17.6089 5.09695 17.3309 4.84185 17.1209C5.09695 16.9109 5.27935 16.6329 5.27935 16.2769C5.27935 15.6459 4.78545 15.1209 4.15435 15.1209ZM7.99805 16.1209C7.44575 16.1209 6.99805 16.5689 6.99805 17.1209C6.99805 17.6729 7.44575 18.1209 7.99805 18.1209H20.9981C21.5504 18.1209 21.9981 17.6729 21.9981 17.1209C21.9981 16.5689 21.5504 16.1209 20.9981 16.1209H7.99805Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/quote.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.01416 5.00488C2.46216 5.00488 2.01416 5.45288 2.01416 6.00488C2.01416 6.55688 2.46216 7.00488 3.01416 7.00488H21.0142C21.5662 7.00488 22.0142 6.55688 22.0142 6.00488C22.0142 5.45288 21.5662 5.00488 21.0142 5.00488H3.01416ZM13.0142 9.00488C12.4622 9.00488 12.0142 9.45288 12.0142 10.0049C12.0142 10.5569 12.4622 11.0049 13.0142 11.0049H21.0142C21.5662 11.0049 22.0142 10.5569 22.0142 10.0049C22.0142 9.45288 21.5662 9.00488 21.0142 9.00488H13.0142ZM5.17017 9.09888C3.82317 10.1339 3.01416 11.7419 3.01416 13.4739C3.01416 13.4839 3.01416 13.4949 3.01416 13.5049C3.01416 14.3339 3.68516 15.0049 4.51416 15.0049C5.34316 15.0049 6.01416 14.3339 6.01416 13.5049C6.01416 12.6759 5.34316 12.0049 4.51416 12.0049C4.44316 12.0049 4.33316 11.9959 4.26416 12.0049C4.54416 11.1559 5.04816 10.4299 5.76416 9.87988C5.98316 9.71188 6.02615 9.41187 5.85815 9.19287C5.68915 8.97287 5.38917 8.92988 5.17017 9.09888ZM9.17017 9.09888C7.82317 10.1339 7.01416 11.7419 7.01416 13.4739C7.01416 13.4839 7.01416 13.4949 7.01416 13.5049C7.01416 14.3339 7.68516 15.0049 8.51416 15.0049C9.34316 15.0049 10.0142 14.3339 10.0142 13.5049C10.0142 12.6759 9.34316 12.0049 8.51416 12.0049C8.44316 12.0049 8.33316 12.0269 8.26416 12.0359C8.54416 11.1869 9.04816 10.4299 9.76416 9.87988C9.98316 9.71188 10.0262 9.41187 9.85815 9.19287C9.68915 8.97287 9.38917 8.92988 9.17017 9.09888ZM13.0142 13.0049C12.4622 13.0049 12.0142 13.4529 12.0142 14.0049C12.0142 14.5569 12.4622 15.0049 13.0142 15.0049H21.0142C21.5662 15.0049 22.0142 14.5569 22.0142 14.0049C22.0142 13.4529 21.5662 13.0049 21.0142 13.0049H13.0142ZM3.01416 17.0049C2.46216 17.0049 2.01416 17.4529 2.01416 18.0049C2.01416 18.5569 2.46216 19.0049 3.01416 19.0049H21.0142C21.5662 19.0049 22.0142 18.5569 22.0142 18.0049C22.0142 17.4529 21.5662 17.0049 21.0142 17.0049H3.01416Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/setting.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.96802 2.45522C7.55002 2.90522 6.32702 3.63923 5.24902 4.64323C4.91602 4.95323 4.81403 5.46123 5.03003 5.86123C5.83103 7.34223 4.99302 8.92723 3.18602 9.01823C2.74402 9.04023 2.35302 9.36823 2.24902 9.79923C2.07002 10.5442 1.99902 11.1682 1.99902 11.9862C1.99902 12.6732 2.07302 13.4512 2.21802 14.1432C2.30802 14.5752 2.68402 14.8862 3.12402 14.9242C4.94202 15.0812 5.84203 16.4682 5.03003 18.2362C4.85003 18.6292 4.93202 19.0992 5.24902 19.3932C6.31102 20.3752 7.53102 21.0682 8.96802 21.5182C9.37802 21.6462 9.84102 21.4912 10.093 21.1432C11.205 19.6042 12.818 19.5992 13.874 21.1432C14.123 21.5062 14.579 21.6812 14.999 21.5492C16.386 21.1122 17.678 20.3692 18.749 19.3932C19.079 19.0922 19.166 18.6052 18.968 18.2052C18.136 16.5262 19.093 14.9852 20.811 14.9552C21.267 14.9472 21.673 14.6482 21.78 14.2052C21.953 13.4882 21.999 12.8642 21.999 11.9862C21.999 11.2322 21.91 10.4892 21.749 9.76823C21.647 9.31123 21.248 8.98723 20.78 8.98623C19.089 8.98323 18.141 7.32123 18.968 5.86123C19.198 5.45523 19.126 4.95723 18.78 4.64323C17.69 3.65323 16.361 2.87922 14.968 2.45522C14.54 2.32522 14.085 2.48523 13.843 2.86123C12.877 4.36223 11.073 4.38823 10.124 2.89323C9.88102 2.50923 9.40002 2.31822 8.96802 2.45522ZM15.046 4.57923C15.729 4.86523 16.268 5.16423 16.887 5.63323C16.161 7.93023 17.392 10.3162 19.942 10.8972C20.005 11.3102 19.999 11.5602 19.999 11.9862C19.999 12.4952 20.006 12.6742 19.948 13.0422C17.409 13.5682 16.153 15.8872 16.86 18.3382C16.252 18.7792 15.817 19.0852 15.054 19.3802C13.262 17.5562 10.774 17.4762 8.94403 19.3922C8.23003 19.0782 7.68104 18.7992 7.12604 18.3302C7.81404 15.8412 6.65103 13.6922 4.06903 13.0402C3.95403 12.5842 4.00002 11.2962 4.06602 10.9052C6.73602 10.2652 7.78803 7.90223 7.12503 5.62623C7.71103 5.18523 8.23803 4.86423 8.92303 4.58623C10.648 6.34123 13.238 6.51623 15.046 4.57923ZM11.999 7.98623C9.79002 7.98623 7.99902 9.77723 7.99902 11.9862C7.99902 14.1962 9.79002 15.9862 11.999 15.9862C14.208 15.9862 15.999 14.1962 15.999 11.9862C15.999 9.77723 14.208 7.98623 11.999 7.98623ZM11.999 9.98623C13.104 9.98623 13.999 10.8822 13.999 11.9862C13.999 13.0912 13.104 13.9862 11.999 13.9862C10.894 13.9862 9.99902 13.0912 9.99902 11.9862C9.99902 10.8822 10.894 9.98623 11.999 9.98623Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/strikethrough.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0049 3.90625C9.79588 3.90625 8.00488 5.69724 8.00488 7.90623C8.00488 8.53823 8.16288 9.16424 8.44288 9.71824C8.62788 10.0862 8.92987 10.4732 9.34887 10.9062H6.00488C5.45288 10.9062 5.00488 11.3542 5.00488 11.9062C5.00488 12.4582 5.45288 12.9062 6.00488 12.9062H11.6609C11.7169 12.9552 11.7459 12.9732 11.8169 13.0312C12.1339 13.2902 12.4629 13.5712 12.7549 13.8432C12.9619 14.0372 13.1239 14.2002 13.2859 14.3752C13.5739 14.6852 13.7829 14.9742 13.8489 15.1252C13.9569 15.3732 14.0049 15.6272 14.0049 15.9062C14.0049 17.0112 13.1099 17.9062 12.0049 17.9062C10.8999 17.9062 10.0049 17.0112 10.0049 15.9062C10.0049 15.3542 9.55688 14.9062 9.00488 14.9062C8.45288 14.9062 8.00488 15.3542 8.00488 15.9062C8.00488 18.1152 9.79588 19.9062 12.0049 19.9062C14.2139 19.9062 16.0049 18.1152 16.0049 15.9062C16.0049 15.3522 15.8779 14.8112 15.6609 14.3122C15.4859 13.9082 15.1839 13.4932 14.7549 13.0312C14.7179 12.9912 14.6689 12.9472 14.6299 12.9062H18.0049C18.5569 12.9062 19.0049 12.4582 19.0049 11.9062C19.0049 11.3542 18.5569 10.9062 18.0049 10.9062H12.3489C12.2919 10.8572 12.2629 10.8382 12.1929 10.7812C11.8809 10.5272 11.5739 10.2642 11.2859 10.0002C11.1109 9.83822 10.9609 9.67823 10.8169 9.53123C10.5109 9.21623 10.3009 8.96624 10.2239 8.81224C10.0849 8.53624 10.0049 8.22423 10.0049 7.90623C10.0049 6.80124 10.8999 5.90624 12.0049 5.90624C13.1099 5.90624 14.0049 6.80124 14.0049 7.90623C14.0049 8.45823 14.4529 8.90623 15.0049 8.90623C15.5569 8.90623 16.0049 8.45823 16.0049 7.90623C16.0049 5.69724 14.2139 3.90625 12.0049 3.90625Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/text_color.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.999 1.95312C6.47602 1.95312 1.99902 6.43012 1.99902 11.9531C1.99902 17.4761 6.47602 21.9531 11.999 21.9531C12.08 21.9531 12.695 21.9661 12.905 21.9531C13.185 21.9351 13.437 21.8911 13.718 21.8281C15.05 21.5281 15.941 20.6311 16.187 19.4221C16.279 18.9641 16.23 18.6641 16.093 17.8281C16.037 17.4871 16.009 17.3241 15.999 17.1411C15.977 16.7211 16.064 16.4761 16.28 16.2651C16.472 16.0791 16.651 15.9791 16.874 15.9531C17.105 15.9261 17.341 15.9771 17.843 16.0781C18.473 16.2051 18.683 16.2131 19.03 16.2031C20.516 16.1611 21.705 15.0451 21.905 13.5151C21.975 12.9841 21.999 12.4771 21.999 11.9531C21.999 6.43012 17.522 1.95312 11.999 1.95312ZM11.999 3.95312C16.417 3.95312 19.999 7.53511 19.999 11.9531C19.999 12.3881 19.964 12.8181 19.905 13.2651C19.83 13.8431 19.447 14.1891 18.968 14.2031C18.835 14.2071 18.708 14.2021 18.249 14.1091C17.549 13.9681 17.159 13.9251 16.655 13.9841C16.001 14.0611 15.387 14.3281 14.874 14.8281C14.196 15.4881 13.98 16.2861 14.03 17.2341C14.045 17.5131 14.056 17.7611 14.124 18.1721C14.216 18.7281 14.242 18.8981 14.218 19.0151C14.129 19.4531 13.844 19.7321 13.28 19.8591C13.106 19.8991 12.957 19.9421 12.78 19.9531C12.629 19.9631 12.489 19.9541 12.155 19.9531C12.075 19.9531 12.084 19.9531 11.999 19.9531C7.58102 19.9531 3.99902 16.3711 3.99902 11.9531C3.99902 7.53511 7.58102 3.95312 11.999 3.95312ZM12.999 6.07812C12.171 6.07812 11.499 6.75012 11.499 7.57811C11.499 8.40611 12.171 9.07811 12.999 9.07811C13.827 9.07811 14.499 8.40611 14.499 7.57811C14.499 6.75012 13.827 6.07812 12.999 6.07812ZM8.81104 7.26513C7.98304 7.26613 7.31104 7.93712 7.31104 8.76512C7.31104 9.59412 7.98304 10.2651 8.81104 10.2651C9.64004 10.2651 10.311 9.59412 10.311 8.76512C10.312 7.93712 9.64004 7.26513 8.81104 7.26513ZM16.218 8.98412C15.389 8.98412 14.718 9.65612 14.718 10.4841C14.718 11.3131 15.389 11.9841 16.218 11.9841C17.046 11.9841 17.718 11.3131 17.718 10.4841C17.718 9.65612 17.046 8.98412 16.218 8.98412ZM7.59302 11.4221C6.76402 11.4221 6.09302 12.0931 6.09302 12.9221C6.09302 13.7501 6.76402 14.4221 7.59302 14.4221C8.42102 14.4221 9.09302 13.7501 9.09302 12.9221C9.09302 12.0931 8.42102 11.4221 7.59302 11.4221ZM10.499 14.6721C9.67102 14.6721 8.99902 15.3431 8.99902 16.1721C8.99902 17.0001 9.67102 17.6721 10.499 17.6721C11.327 17.6721 11.999 17.0001 11.999 16.1721C11.999 15.3431 11.327 14.6721 10.499 14.6721Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/text_decoration.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.47028 3.90625C7.06928 3.90725 6.64926 4.13024 6.50226 4.59424L2.06427 18.5942C1.89727 19.1202 2.16327 19.6762 2.68927 19.8442C3.21527 20.0112 3.77227 19.7452 3.93927 19.2192L5.31427 14.9062H9.65826L11.0643 19.2192C11.2353 19.7442 11.7893 20.0142 12.3143 19.8442C12.8393 19.6732 13.1093 19.1192 12.9393 18.5942L8.40827 4.59424C8.25827 4.13124 7.87228 3.90525 7.47028 3.90625ZM17.5643 7.90625C16.0363 7.90625 14.5733 9.07324 14.0643 10.5942C13.8893 11.1172 14.1653 11.6682 14.6893 11.8442C15.2133 12.0192 15.7643 11.7422 15.9393 11.2192C16.1853 10.4842 16.9313 9.90625 17.5643 9.90625H18.4393C19.2703 9.90625 20.0023 10.7702 20.0023 11.9062V12.9062C19.1163 12.9062 18.0203 12.9062 17.5643 12.9062C15.5983 12.9062 14.0023 14.4672 14.0023 16.4062C14.0023 18.3462 15.5983 19.9092 17.5643 19.9062C17.6143 19.9062 17.9343 19.9072 18.0333 19.9062C18.8003 19.8982 19.5023 19.6422 20.1273 19.2502C20.2743 19.6192 20.5803 19.9062 21.0023 19.9062C21.5543 19.9062 22.0023 19.4582 22.0023 18.9062V15.9062C22.0043 15.6982 22.0023 13.9832 22.0023 13.9062V11.9062C22.0023 9.72825 20.4493 7.90625 18.4393 7.90625H17.5643ZM7.47028 8.18725L9.00226 12.9062H5.97028L7.47028 8.18725ZM17.5643 14.9062C18.0203 14.9062 19.1193 14.9062 20.0023 14.9062C20.0023 15.3602 20.0033 15.7782 20.0023 15.8752C19.9853 17.1102 19.0653 17.8952 18.0023 17.9062C17.9333 17.9072 17.6473 17.9062 17.5643 17.9062C16.6923 17.9072 16.0023 17.2292 16.0023 16.4062C16.0023 15.5842 16.6903 14.9062 17.5643 14.9062Z" fill="#2F3030"/>
+</svg>

assets/mobile/toolbar_icons/underline.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.98828 3.90625C7.43628 3.90625 6.98828 4.35425 6.98828 4.90625V10.9062C6.98828 13.6672 9.22727 15.9062 11.9883 15.9062C14.7493 15.9062 16.9883 13.6672 16.9883 10.9062V4.90625C16.9883 4.35425 16.5403 3.90625 15.9883 3.90625C15.4363 3.90625 14.9883 4.35425 14.9883 4.90625V10.9062C14.9883 12.5632 13.6453 13.9062 11.9883 13.9062C10.3313 13.9062 8.98828 12.5632 8.98828 10.9062V4.90625C8.98828 4.35425 8.54028 3.90625 7.98828 3.90625ZM7.98828 17.9062C7.43628 17.9062 6.98828 18.3542 6.98828 18.9062C6.98828 19.4582 7.43628 19.9062 7.98828 19.9062H15.9883C16.5403 19.9062 16.9883 19.4582 16.9883 18.9062C16.9883 18.3542 16.5403 17.9062 15.9883 17.9062H7.98828Z" fill="#2F3030"/>
+</svg>

example/lib/pages/simple_editor.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
+import 'package:appflowy_editor/src/infra/mobile/mobile.dart';
 
 class SimpleEditor extends StatelessWidget {
   const SimpleEditor({
@@ -108,6 +109,27 @@ class SimpleEditor extends StatelessWidget {
   }
 
   Widget _buildMobileToolbar(BuildContext context, EditorState editorState) {
-    return MobileToolbar(editorState: editorState);
+    return MobileToolbar(
+      editorState: editorState,
+      // TODO(yijing): Implement toolbar features later
+      toolbarItems: [
+        IconButton(
+          onPressed: () {
+            editorState.selectionService.updateSelection(null);
+          },
+          icon: const Icon(Icons.keyboard_hide),
+        ),
+        ...AFMobileIcons.values
+            .map(
+              (e) => IconButton(
+                onPressed: () {},
+                icon: AFMobileIcon(
+                  afMobileIcons: e,
+                ),
+              ),
+            )
+            .toList(),
+      ],
+    );
   }
 }

lib/src/editor/toolbar/mobile_toolbar.dart

@@ -5,9 +5,11 @@ class MobileToolbar extends StatelessWidget {
   const MobileToolbar({
     super.key,
     required this.editorState,
+    required this.toolbarItems,
   });
 
   final EditorState editorState;
+  final List<Widget> toolbarItems;
 
   @override
   Widget build(BuildContext context) {
@@ -20,19 +22,14 @@ class MobileToolbar extends StatelessWidget {
         final width = MediaQuery.of(context).size.width;
         return SizedBox(
           width: width,
-          height: 30,
+          height: 50,
           child: Container(
-            color: Colors.grey.withOpacity(0.3),
+            // TODO(yijing): expose background color in editor style
-            child: Row(
+            color: const Color(0xFFF1F1F4),
-              children: [
+            child: ListView.builder(
-                IconButton(
+              itemBuilder: (context, index) => toolbarItems[index],
-                  onPressed: () {
+              itemCount: toolbarItems.length,
-                    editorState.selectionService.updateSelection(null);
+              scrollDirection: Axis.horizontal,
-                  },
-                  icon: const Icon(Icons.keyboard_hide),
-                ),
-                const Text('FIXME: Mobile Toolbar'),
-              ],
             ),
           ),
         );