Repository: excalidraw
Issue: Excalidraw as Design Editor Core
Labels: enhancement

### Introducction

Hi! I spent 1 month of time trying to create a Design Editor like Canva/Figma from scratch using KonvaJS, but after some time I realized that it was unfeasible and **I decided to migrate to Excalidraw** and I really regret not doing it sooner

I'm raising this Issue to request some feature unlocks that will allow us to create a more customized Editor for different use cases

### **Features**

- [ ] **Hide UI Natively**: You can currently hide the UI using CSS but React still builds and deconstructs elements.
  ```css
  /* Current implementation */
  .excalidraw .layer-ui__wrapper {
    display: none !important;
  }
  ```
- [ ] **Custom selection color**: Give the possibility that the color of the selection can be changed to match the color of the application
      <img width="1276" alt="image-5" src="https://github.com/excalidraw/excalidraw/assets/132106533/d6eb9543-06f1-45af-9bd5-db2012169e06">

- [ ] **Editor Grid**:

  - [ ] **Grid disappears (Bug)**: This bug also exists on [excalidraw.com](https://excalidraw.com/), but it is less noticeable because it has a `gridSize: 20`, but now I use a `gridSize: 1`, so it is much more noticeable.

    ```typescript
    const [zoom, setZoom] = useState(1.0);
    const gridSize = useRef<number>(null);
    const MIN_GRID_VISIBLE_ZOOM = 10;

    useEffect(() => {
      if (!excalidrawAPI) return;

      const size = zoom >= MIN_GRID_VISIBLE_ZOOM ? 1 : null;

      if (size === gridSize.current) return;

      gridSize.current = size;

      excalidrawAPI.updateScene({
        appState: {
          gridSize: size,
        },
      });
    }, [excalidrawAPI, zoom]);

    <Excalidraw
      // ... More implementation
      gridModeEnabled={zoom >= MIN_GRID_VISIBLE_ZOOM}
    />;
    ```
     https://github.com/excalidraw/excalidraw/assets/132106533/aa81db6f-4274-4a17-a8f4-2730fa597a1c

  - [ ] **Grid Line Color**: Customize the color of the lines, this allows you to hide the lines when you do not want them to be shown but still maintain the snapping. It may not be the best performing but it is the easiest to implement.
        **No lines, no snapping 😔**
        <img width="495" alt="image-3" src="https://github.com/excalidraw/excalidraw/assets/132106533/1fdcb21c-e203-4faa-a2f6-80571766f73f">
        **No lines, snapping ✅**
        <img width="682" alt="image-4" src="https://github.com/excalidraw/excalidraw/assets/132106533/f5925fb1-dbbd-45b6-8678-3aba344aea3e">

- [ ] **Text Element**: The text element works very well, but there are things that don't have

  - [ ] **Support Custom FontFamily**: Excalidraw can support different font families, but currently it is blocked for only 3. **I am not requesting a system to load the fonts**, but rather that the canvas can render that custom font. [getFontFamilyString](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L88) and [fontFamilyValues](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L96)<img width="904" alt="image-2" src="https://github.com/excalidraw/excalidraw/assets/132106533/2451b002-2bc0-4e74-be9f-aa934ed9e715">

  - [ ] **Fill Property**: Excalidraw has support for Stroke but not for fill, so you can't make more interesting combinations <img width="749" alt="image-1" src="https://github.com/excalidraw/excalidraw/assets/132106533/ca4be5ee-4059-48a2-a1b8-420a0c49a05b">

  - [ ] **Italic (Optional)**: It may not be necessary, since many fonts have their variants in Italic

- [ ] **[\_ExcalidrawElementBase](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L27)**: All elements have roundness, stroke (strokeColor, strokeWidth and strokeStyle) and fill (backgroundColor and fillStyle) property but not all elements render them

  ```typescript
  type _ExcalidrawElementBase = Readonly<{
    // ... more implementation
    strokeColor: string;
    backgroundColor: string;
    fillStyle: FillStyle;
    strokeWidth: number;
    strokeStyle: StrokeStyle;
    roundness: null | { type: RoundnessType; value?: number };
    // ... more implementation
  }>;
  ```

  - [ ] **Roundness Property**: The elements that are not selected are those that ignore the property
    - [x] Rectangle
    - [x] Diamond
    - [x] Embed
    - [ ] Frame
    - [ ] Image
  - [ ] **Fill Property**: The elements that are not selected are those that ignore the property
    - [x] Rectangle
    - [x] Diamond
    - [x] Image
    - [x] Embed
    - [ ] Frame
    - [ ] Text
  - [ ] **Stroke Property**: The elements that are not selected are those that ignore the property
    - [x] Rectangle
    - [x] Diamond
    - [x] Text
    - [x] Embed
    - [ ] Image
    - [ ] Frame