frappe / builder Goto Github PK

View Code? Open in Web Editor NEW

367.0 367.0 110.0 13.08 MB

Modern website builder for modern web pages

Home Page: https://frappe.io/builder

License: GNU Affero General Public License v3.0

HTML 0.96% JavaScript 1.61% Vue 62.56% CSS 0.13% Python 12.97% TypeScript 21.32% Shell 0.44%

builder frappe-framework low-code no-code website

builder's Introduction

a web framework with "batteries included"

it's pronounced - fra-pay

Full-stack web application framework that uses Python and MariaDB on the server side and a tightly integrated client side library. Built for ERPNext.

Login for the PWD site: (username: Administrator, password: admin)

Installation
Contributing
Resources
License

Installation

Production

Development

Contributing

Resources

frappeframework.com - Official documentation of the Frappe Framework.
frappe.school - Pick from the various courses by the maintainers or from the community.
buildwithhussain.dev - Watch Frappe Framework being used in the wild to build world-class web apps.

License

This repository has been released under the MIT License.

By contributing to Frappe, you agree that your contributions will be licensed under its MIT License.

builder's People

Contributors

Stargazers

Watchers

Forkers

avarsa yrestom git-avc govind-jangid mohamedabdulsalam96 zaqoutabed msalim79 fahimfoysal2 jishnu-sigzen abaso007 mekilery ivanguevaram mohamedelsabbagh laotiandage gntuxer chromonav one-highflyer asoral tmfone dorucioclea lizardopc revasiya dsaziz sipho-mokoena isyuanjun ah-sabbir advaith10 youngjid donnc-lab thabresh-s mohamadosama jackerzz empress-eco jerry317395616 launtapp abdelhamidcodes chrisphine10 deokgyuhan rizki0030 itsyosefali blaggacao mohsinalimat newhub-spec choosebiruk douglas-nkubitu fernandofinyellow rpol bizenforce twilighty-abhi wangjun008xx mobiwork efeone developmentforpeople fotokrome qrojects maniamartial batonac shimanshucs18 shabbirhasan1 samihalawa zhishudebaba163 kponsakthivel sebbaghnassim21 stefanradosavljevic jodev97 bodhihu gaurav-r-a-j neurodance ezfinanzfrappe awad19977 darshitvadadoriya alooosh gfmilingui gypsiefighterpilot magnoliaprojects dineshpanchal93 haisom2022 assimilate-technologies apiao2donor eden-platform 13995595007 mualala pateljannat teddyseptiadi paket-phileep ahmedalbanna abanoupjohnny achievehf tridotstech greekrode cybererps shreyasthenewbie marciojsj uhrjun skaschimer zhnathaniellee maharshivpatel yt-easytouch guangminglion mahsem

builder's Issues

add favicon and client script in builder

It would be nice to have the option to add the client scripts from the builder as well as a place where you can change the favicon

Feat: graphical doctypes access

Currently, it requires a lot of manual work and also some low code experience to access frappe doctypes within builder.
While https://frappeframework.com/docs/user/en/desk/scripting/script-api provides a good overview about how to access data from doctypes I would prefer to see a no code option in the future.

So fetching available doctypes, and also filtering necessary data in a pure graphical way. A folder like structure with a search option could be a possible implementation.

Option to add border radius from Properties panel

Currently need to use custom CSS styling for it.

Dark theme font color legibility

Auto-publish after a few seconds

Sometimes you may forget to publish.

Padding set with UI handles overrides padding set manually in properties

Navbar: The '40px' set in properties is not honoured since padding was set using the pink handlebars.

Bug: preview issues using components inside components

I encountered an issue using a component inside a component. For instance, creating a component called headline and using this component inside a second component

This leads to the following problem:

Component not rendered in editor canvas. In the preview, it is rendered correctly though

Undo not working in Component Editor

Tried Ctrl + Z after a couple of actions like setting a margin, and hiding a component. Didn't work. Only works when making changes after exiting Component Editor.

Bug(Builder Component): raw styles are sorted, but should not be

Frappe Builder: v1.4.0 (develop)
Frappe Framework: v15.15.0 (version-15)

The raw styles are apparently sorted alphabetically. This can be a problem as the order is sometimes relevant.

E.g., active:background in

"rawStyles": {
    "active:background": "#2563eb",
    "active:box-shadow": "0 0 0 4px #dbeafe",
    "hover:background": "#1d4ed8"
},

will be ignored, since hover:background needs to be before active:background.

App fails to build while bench get-app

Hello,

I'm attempting to install builder into an erpnext environment running inside docker coompose. When I run bench get-app builder inside the backend container, the below error occurs during the yarn build command:

    `Running build command for builder
    $ cd frontend && yarn build
    $ vite build --base=/assets/builder/frontend/ && yarn copy-html-entry
    ✘ [ERROR] No matching export in "../../../sites/common_site_config.json" for import "webserver_port"
    
        vite.config.js:4:9:
          4 │ import { webserver_port } from "../../../sites/common_site_config.j...
            ╵          ~~~~~~~~~~~~~~
    
    failed to load config from /home/frappe/frappe-bench/apps/builder/frontend/vite.config.js
    error during build:
    Error: Build failed with 1 error:
    vite.config.js:4:9: ERROR: No matching export in "../../../sites/common_site_config.json" for import "webserver_port"
        at failureErrorWithLog (/home/frappe/frappe-bench/apps/builder/node_modules/esbuild/lib/main.js:1575:15)
        at /home/frappe/frappe-bench/apps/builder/node_modules/esbuild/lib/main.js:1033:28
        at runOnEndCallbacks (/home/frappe/frappe-bench/apps/builder/node_modules/esbuild/lib/main.js:1447:61)
        at buildResponseToResult (/home/frappe/frappe-bench/apps/builder/node_modules/esbuild/lib/main.js:1031:7)
        at /home/frappe/frappe-bench/apps/builder/node_modules/esbuild/lib/main.js:1143:14
        at responseCallbacks.<computed> (/home/frappe/frappe-bench/apps/builder/node_modules/esbuild/lib/main.js:680:9)
        at handleIncomingPacket (/home/frappe/frappe-bench/apps/builder/node_modules/esbuild/lib/main.js:735:9)
        at Socket.readFromStdout (/home/frappe/frappe-bench/apps/builder/node_modules/esbuild/lib/main.js:656:7)
        at Socket.emit (node:events:517:28)
        at addChunk (node:internal/streams/readable:335:12)
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    Error: Command failed: yarn build
        at checkExecSyncError (node:child_process:890:11)
        at execSync (node:child_process:962:15)
        at run_build_command_for_apps (/home/frappe/frappe-bench/apps/frappe/esbuild/esbuild.js:451:5)
        at execute (/home/frappe/frappe-bench/apps/frappe/esbuild/esbuild.js:128:23)
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
      status: 1,
      signal: null,
      output: [ null, null, null ],
      pid: 463,
      stdout: null,
      stderr: null
    }
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    Traceback (most recent call last):
      File "<frozen runpy>", line 198, in _run_module_as_main
      File "<frozen runpy>", line 88, in _run_code
      File "/home/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 114, in <module>
        main()
      File "/home/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 20, in main
        click.Group(commands=commands)(prog_name="bench")
      File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1157, in __call__
        return self.main(*args, **kwargs)
               ^^^^^^^^^^^^^^^^^^^^^^^^^^
      File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1078, in main
        rv = self.invoke(ctx)
             ^^^^^^^^^^^^^^^^
      File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1688, in invoke
        return _process_result(sub_ctx.command.invoke(sub_ctx))
                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1688, in invoke
        return _process_result(sub_ctx.command.invoke(sub_ctx))
                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1434, in invoke
        return ctx.invoke(self.callback, **ctx.params)
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      File "/home/frappe/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 783, in invoke
        return __callback(*args, **kwargs)
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^
      File "/home/frappe/frappe-bench/apps/frappe/frappe/commands/utils.py", line 72, in build
        bundle(
      File "/home/frappe/frappe-bench/apps/frappe/frappe/build.py", line 257, in bundle
        frappe.commands.popen(command, cwd=frappe_app_path, env=get_node_env(), raise_err=True)
      File "/home/frappe/frappe-bench/apps/frappe/frappe/commands/__init__.py", line 97, in popen
        raise subprocess.CalledProcessError(return_, command)
    subprocess.CalledProcessError: Command 'yarn run production --apps builder --run-build-command' returned non-zero exit status 1.
    ERROR: bench build --app builder
    subprocess.CalledProcessError: Command 'bench build --app builder' returned non-zero exit status 1.
    
    The above exception was the direct cause of the following exception:
    
    Traceback (most recent call last):
      File "/usr/local/bin/bench", line 8, in <module>
        sys.exit(cli())
                 ^^^^^
      File "/usr/local/lib/python3.11/site-packages/bench/cli.py", line 132, in cli
        bench_command()
      File "/usr/local/lib/python3.11/site-packages/bench/commands/make.py", line 167, in get_app
        get_app(
      File "/usr/local/lib/python3.11/site-packages/bench/app.py", line 444, in get_app
        app.install(verbose=verbose, skip_assets=skip_assets, restart_bench=restart_bench)
      File "/usr/local/lib/python3.11/site-packages/bench/utils/render.py", line 126, in wrapper_fn
        return fn(*args, **kwargs)
               ^^^^^^^^^^^^^^^^^^^
      File "/usr/local/lib/python3.11/site-packages/bench/app.py", line 242, in install
        install_app(
      File "/usr/local/lib/python3.11/site-packages/bench/app.py", line 586, in install_app
        build_assets(bench_path=bench_path, app=app)
      File "/usr/local/lib/python3.11/site-packages/bench/utils/bench.py", line 351, in build_assets
        exec_cmd(command, cwd=bench_path, env={"BENCH_DEVELOPER": "1"})
      File "/usr/local/lib/python3.11/site-packages/bench/utils/__init__.py", line 158, in exec_cmd
        raise CommandFailedError(cmd) from subprocess.CalledProcessError(return_code, cmd)
    bench.exceptions.CommandFailedError: bench build --app builder`

Mismatch between the name of the project and the concerned folder name within it is causing unsuccessful installation

In README.md, for installation of the app onto a site, the command that works for now is
bench --site sitename.localhost install-app website_builder instead of
bench --site sitename.localhost install-app builder

Attach script dropdown list isn't scrollable

Overflows off the screen if list is too long. Cannot scroll with the mouse wheel or any visible scrollbars.

Add fade interval to dark/light mode toggle

A slight fade for the transition would feel better than the instant switch.

Modifying padding on mobile resets on desktop view too

This is only when manually entering values in Properties. Works fine if using UI handlebars to change padding.

padding.issue.mov

Unclear workflow when working with components

After playing a little bit more with components inside builder, I'd like to give some feedback and improvement proposals.

Adding a dedicated section to the dashboard of builder for components would improve the overview of what is an actual page and what is a component. Currently, navigating to a component through a page is not very logical.
There is no way of getting out the editing view of a component than refreshing the page. So when you right-click on a component -> "Edit Component" the component is in, lets call it focus mode, and the only way to get out is to go back to the dashboard and into the page again or by refreshing the page.
What is the sync component function for, I image if you edited the component you can get the latest version of the component when placed inside a page. Which brings me to the next point
I couldn't find a way to edit a component and save it as the same component, even if I save it with the same name it will just create a different component with probably a different ID in the background but the same name.

I think components are such critical pieces to reusable web design that I truly hope improvements on that front are planned or will be considered after this post. Or maybe the functionality is already there but as described not very user-friendly at this point. Hope you can bring some clarity here and as always, keep up the great work @surajshetty3416

Erasing color hex defaults to #fff instead of unsetting it

Hitting backspace does not unset the color, instead sets it to #fff. Next I have shown how only clicking on 'x' unsets it.

Screen.Recording.2023-11-20.at.13.21.10.mov

Feat: Add option/field for meta data and SEO relevant information

Currently there it is no simple option to add meta data through the builder interface.
Below is an example from https://github.com/webstudio-is/webstudio on how an implementation from the user perspective could look like

Left sidebar context menu not visible towards the bottom edge of the screen

Output location of the generated markup

Is there a way to save the generated html and css in a custom app's www directory?

It would give more control and convenience to be able to save the markup with a custom app.

Bug: Unable to delete element copied from component

Today by accident, I copied or duplicated an element from a component to use in a different context.
Problem is, I can not move or delete this element in the element tree on the left or in the canvas itself. Whenever I try, I get the following message:

this is how it looks in the tree view:

Should be very easy to reproduce, I think solution could be, not allowing to copy single elements from components or detaching the element from the component if you do so. Otherwise, we would probably need a better component-element to element linking

Bug on page preview/publish

I have this page, with a considerable number of components:

When i click on "preview" or "publish", it doesn't render and returns the following error:

Traceback (most recent call last):
  File "apps/frappe/frappe/website/serve.py", line 18, in get_response
    response = renderer_instance.render()
  File "apps/frappe/frappe/website/page_renderers/document_page.py", line 43, in render
    html = self.get_html()
  File "apps/frappe/frappe/website/utils.py", line 524, in cache_html_decorator
    html = func(*args, **kwargs)
  File "apps/frappe/frappe/website/page_renderers/document_page.py", line 52, in get_html
    self.update_context()
  File "apps/frappe/frappe/website/page_renderers/document_page.py", line 67, in update_context
    ret = self.doc.get_context(self.context)
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 125, in get_context
    content, style, fonts = get_block_html(blocks)
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 326, in get_block_html
    data = get_html(blocks, soup)
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 322, in get_html
    html += str(get_tag(block, soup))
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 315, in get_tag
    tag.append(get_tag(child, soup, data_key=data_key))
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 315, in get_tag
    tag.append(get_tag(child, soup, data_key=data_key))
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 315, in get_tag
    tag.append(get_tag(child, soup, data_key=data_key))
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 271, in get_tag
    append_state_style(state_styles, style_tag, style_class)
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 359, in append_state_style
    state, property = key.split(":")
ValueError: too many values to unpack (expected 2)

I think it's because i copied and paste too many components, but all the properties are defined correctly

For Linux and Windows user, change undo to ctrl+z instead of windows+z

for windows and linux user the common combination is ctrl+key instead of windows+key
Or give the option to bind keys, to get your own combinations

Letter spacing not applied from pasted style

When pasting a style from Figma Dev mode (not design mode) e.g. below, the other properties are applied except letter spacing.

font-family: Inter V;
font-size: 11px;
font-style: normal;
font-weight: 600;
line-height: 115%; /* 12.65px */
letter-spacing: 0.99px;
text-transform: uppercase;

Add property for font style

Useful for italic text. Pretty common so can have it as an option under Typography, instead of having to add manual CSS for it.

dont override homepage

builder/website_builder/hooks.py

Line 41 in 6223bdb

home_page = "/p/home"

Feat: Export Layout to HTML ro JSON format (Metadata)

Give facility to user to export Layout created in Builder to HTML or JSON format (Metadata).

Feat: add sorting option to dashboard

Currently, the default sorting option is by modification date, which can be annoying if you jump back and forth editing different pages.
I suggest adding sorting by name; ascending and descending to the dashboard so that the order keeps the same even after editing.

frappe erpnext v13 No module named 'frappe.website.serve')

Hello, trying to install frappe builder on my frappe v13 gives me this error_:

An error occurred while installing website_builder: Module import failed for Builder Page (website_builder.website_builder.doctype.builder_page.builder_page Error: No module named 'frappe.website.serve')
Traceback (most recent call last):
File "apps/frappe/frappe/modules/utils.py", line 238, in load_doctype_module
doctype_python_modules[key] = frappe.get_module(module_name)
File "apps/frappe/frappe/init.py", line 1200, in get_module
return importlib.import_module(modulename)
File "/usr/lib/python3.8/importlib/init.py", line 127, in import_module
return _bootstrap._gcd_import(name[level:], package, level)
File "", line 1014, in _gcd_import
File "", line 991, in _find_and_load
File "", line 975, in _find_and_load_unlocked
File "", line 671, in _load_unlocked
File "", line 848, in exec_module
File "", line 219, in _call_with_frames_removed
File "apps/website_builder/website_builder/website_builder/doctype/builder_page/builder_page.py", line 13, in
from frappe.website.serve import get_response_content, get_response
ModuleNotFoundError: No module named 'frappe.website.serve'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
File "apps/frappe/frappe/commands/site.py", line 293, in install_app
_install_app(app, verbose=context.verbose)
File "apps/frappe/frappe/installer.py", line 186, in install_app
sync_for(name, force=True, sync_everything=True, verbose=verbose, reset_permissions=True)
File "apps/frappe/frappe/model/sync.py", line 75, in sync_for
import_file_by_path(
File "apps/frappe/frappe/modules/import_file.py", line 146, in import_file_by_path
import_doc(
File "apps/frappe/frappe/modules/import_file.py", line 275, in import_doc
doc.insert()
File "apps/frappe/frappe/model/document.py", line 291, in insert
self.run_post_save_methods()
File "apps/frappe/frappe/model/document.py", line 1085, in run_post_save_methods
self.run_method("on_update")
File "apps/frappe/frappe/model/document.py", line 941, in run_method
out = Document.hook(fn)(self, *args, **kwargs)
File "apps/frappe/frappe/model/document.py", line 1264, in composer
return composed(self, method, *args, **kwargs)
File "apps/frappe/frappe/model/document.py", line 1246, in runner
add_to_return_value(self, fn(self, *args, **kwargs))
File "apps/frappe/frappe/model/document.py", line 938, in fn
return method_object(*args, **kwargs)
File "apps/frappe/frappe/core/doctype/doctype/doctype.py", line 376, in on_update
self.run_module_method("on_doctype_update")
File "apps/frappe/frappe/core/doctype/doctype/doctype.py", line 435, in run_module_method
module = load_doctype_module(self.name, self.module)
File "apps/frappe/frappe/modules/utils.py", line 240, in load_doctype_module
raise ImportError(
ImportError: Module import failed for Builder Page (website_builder.website_builder.doctype.builder_page.builder_page Error: No module named 'frappe.website.serve')

need side panels to be scrollable

The side panel css should be scrollable. Need to remove no-scroll class from (right) side block.

Integration of plasmic.app as page builder

I was wondering, if we would gain more from implementing and integration plasmic into frappe using also frappe-ui and the frappe react sdk.

The recently open-sourced their whole application and say that it could well integrate with existing codebases:
https://plasmic.app/

What do you think about it

Text formatting breaks when editing from Properties > Content

When editing this text from Content field in Properties panel:

The font style is reset, as below:

Bug: container height stretch issue

When I create a container with a horizontal stack and two containers inside, I have an issue with the height growing of one of the inner containers.
The first inner container is set to height=fit-content and the second is set to stretch or 100%. In the editor the result looks correct and as expected but in the preview and publish view the second container doesn't stretch.

Unable to install in v15.

Getting builder
$ git clone https://github.com/frappe/builder.git  --depth 1 --origin upstream
Cloning into 'builder'...
remote: Enumerating objects: 186, done.
remote: Counting objects: 100% (186/186), done.
remote: Compressing objects: 100% (169/169), done.
remote: Total 186 (delta 15), reused 98 (delta 6), pack-reused 0
Receiving objects: 100% (186/186), 250.43 KiB | 3.58 MiB/s, done.
Resolving deltas: 100% (15/15), done.
Ignoring dependencies of https://github.com/frappe/builder.git. To install dependencies use --resolve-deps
Installing builder
$ /opt/bench/frappe-bench/env/bin/python -m pip install --quiet --upgrade -e /opt/bench/frappe-bench/apps/builder 

[notice] A new release of pip is available: 23.3.1 -> 23.3.2
[notice] To update, run: python -m pip install --upgrade pip
$ yarn install
yarn install v1.22.21
(node:68737) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "ace-builds@^1.22.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > @tiptap/vue-3 > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > @tiptap/vue-3 > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
warning "workspace-aggregator-29fd6d24-3d0d-41c9-979b-a99f036c6994 > builder-ui > frappe-ui > @tiptap/[email protected]" has unmet peer dependency "@tiptap/core@^2.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
$ cd frontend && yarn install
yarn install v1.22.21
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.64s.
Done in 41.37s.
$ bench build --app builder
Linking /opt/bench/frappe-bench/apps/frappe/node_modules to ./assets/frappe/node_modules                                                                        Linking /opt/bench/frappe-bench/apps/hrms/node_modules to ./assets/hrms/node_modules                                                                            Linking /opt/bench/frappe-bench/apps/builder/node_modules to ./assets/builder/node_modules                                                                      Linking /opt/bench/frappe-bench/apps/employee_self_service/employee_self_service/public to ./assets/employee_self_service                                       Linking /opt/bench/frappe-bench/apps/ikit_trading/ikit_trading/public to ./assets/ikit_trading                                                                  Linking /opt/bench/frappe-bench/apps/erpnext/node_modules to ./assets/erpnext/node_modules                                                                      ✔ Application Assets Linked                                            


yarn run v1.22.21
warning ../../../package.json: No license field
$ node esbuild --production --apps builder --run-build-command
File                                                        Size

 DONE  Total Build Time: 260.735ms


Running build command for builder
$ cd frontend && yarn build
$ vite build --base=/assets/builder/frontend/ && yarn copy-html-entry
vite v3.2.7 building for production...
transforming (98) src/pages/PagePreview.vueBrowserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
transforming (173) ../node_modules/socket.io-client/build/esm/manager.js
                nter-DisplayRegular.woff2?v=3.19 referenced in /opt/bench/frappe-bench/apps/builder/frontend/src/index.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
transforming (495) ../node_modules/ace-builds/src-noconflict/ace.jsKilled
error Command failed with exit code 137.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 137.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command failed: yarn build
    at genericNodeError (node:internal/errors:956:15)
    at wrappedFn (node:internal/errors:510:14)
    at checkExecSyncError (node:child_process:890:11)
    at execSync (node:child_process:962:15)
    at run_build_command_for_apps (/opt/bench/frappe-bench/apps/frappe/esbuild/esbuild.js:451:5)
    at execute (/opt/bench/frappe-bench/apps/frappe/esbuild/esbuild.js:128:23)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  status: 137,
  signal: null,
  output: [ null, null, null ],
  pid: 68899,
  stdout: null,
  stderr: null
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Traceback (most recent call last):
  File "<frozen runpy>", line 198, in _run_module_as_main
  File "<frozen runpy>", line 88, in _run_code
  File "/opt/bench/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 114, in <module>
    main()
  File "/opt/bench/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 20, in main
    click.Group(commands=commands)(prog_name="bench")
  File "/opt/bench/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1157, in _call_
    return self.main(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/opt/bench/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1078, in main
    rv = self.invoke(ctx)
         ^^^^^^^^^^^^^^^^
  File "/opt/bench/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1688, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/opt/bench/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1688, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/opt/bench/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 1434, in invoke
    return ctx.invoke(self.callback, **ctx.params)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/opt/bench/frappe-bench/env/lib/python3.11/site-packages/click/core.py", line 783, in invoke
    return __callback(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/opt/bench/frappe-bench/apps/frappe/frappe/commands/utils.py", line 72, in build
    bundle(
  File "/opt/bench/frappe-bench/apps/frappe/frappe/build.py", line 257, in bundle
    frappe.commands.popen(command, cwd=frappe_app_path, env=get_node_env(), raise_err=True)
  File "/opt/bench/frappe-bench/apps/frappe/frappe/commands/_init_.py", line 97, in popen
    raise subprocess.CalledProcessError(return_, command)
subprocess.CalledProcessError: Command 'yarn run production --apps builder --run-build-command' returned non-zero exit status 1.
ERROR: bench build --app builder
subprocess.CalledProcessError: Command 'bench build --app builder' returned non-zero exit status 1.

The above exception was the direct cause of the following exception:

Traceback (most recent call last):
  File "/home/frappe/.local/bin/bench", line 8, in <module>
    sys.exit(cli())
             ^^^^^
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/cli.py", line 132, in cli
    bench_command()
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/commands/make.py", line 167, in get_app
    get_app(
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/app.py", line 444, in get_app
    app.install(verbose=verbose, skip_assets=skip_assets, restart_bench=restart_bench)
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/utils/render.py", line 126, in wrapper_fn
    return fn(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/app.py", line 242, in install
    install_app(
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/app.py", line 586, in install_app
    build_assets(bench_path=bench_path, app=app)
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/utils/bench.py", line 351, in build_assets
    exec_cmd(command, cwd=bench_path, env={"BENCH_DEVELOPER": "1"})
  File "/home/frappe/.local/lib/python3.11/site-packages/bench/utils/_init_.py", line 158, in exec_cmd
    raise CommandFailedError(cmd) from subprocess.CalledProcessError(return_code, cmd)
bench.exceptions.CommandFailedError: bench build --app builder

Decrease hover area of properties button (3 Dots) of the page cards in page overview

Currently, the hover state of the properties button (3 dots) is misleading. Although the button changes color whenever you move the mouse anywhere on the card of any page, in order to get to the properties of the respective card you must pretty accurately click the button (3 dots) otherwise you will just open the document. Not really an issue but misleading for the user and inconsistent behavior from hover state to actual link.

Bug(UI): strange behavior when using spaces

Frappe Builder: v1.4.0 (develop)
Frappe Framework: v15.15.0 (version-15)

no-spaces.mov

Add text-transform property

Especially helpful for using with uppercase text. Can also add support for style pasted from Figma which contains text-transform property.

How te delete component

I was just trying the website builder but I was not able to find out how to delete an added component.

Deleting an element from a component breaks all pages it is embedded in

The current fix is to manually 'reset component' on all pages, if you delete an element from the component and the page cannot find it anymore. Would be great if we could prevent this from happening.

Traceback (most recent call last):
  File "apps/frappe/frappe/website/serve.py", line 18, in get_response
    response = renderer_instance.render()
               ^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "apps/frappe/frappe/website/page_renderers/document_page.py", line 40, in render
    html = self.get_html()
           ^^^^^^^^^^^^^^^
  File "apps/frappe/frappe/website/utils.py", line 524, in cache_html_decorator
    html = func(*args, **kwargs)
           ^^^^^^^^^^^^^^^^^^^^^
  File "apps/frappe/frappe/website/page_renderers/document_page.py", line 49, in get_html
    self.update_context()
  File "apps/frappe/frappe/website/page_renderers/document_page.py", line 64, in update_context
    ret = self.doc.get_context(self.context)
          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 85, in get_context
    content, style, fonts = get_block_html(blocks)
                            ^^^^^^^^^^^^^^^^^^^^^^
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 205, in get_block_html
    data = get_html(blocks, soup)
           ^^^^^^^^^^^^^^^^^^^^^^
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 201, in get_html
    html += str(get_tag(block, soup))
                ^^^^^^^^^^^^^^^^^^^^
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 196, in get_tag
    tag.append(get_tag(child, soup, data_key=data_key))
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 196, in get_tag
    tag.append(get_tag(child, soup, data_key=data_key))
               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "apps/builder/builder/builder/doctype/builder_page/builder_page.py", line 161, in get_tag
    tag = soup.new_tag(element)
          ^^^^^^^^^^^^^^^^^^^^^
  File "env/lib/python3.11/site-packages/bs4/__init__.py", line 518, in new_tag
    return self.element_classes.get(Tag, Tag)(
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "env/lib/python3.11/site-packages/bs4/element.py", line 1249, in __init__
    raise ValueError("No value provided for new tag's name.")
ValueError: No value provided for new tag's name.

Handle exception when data script fails

HTML section editor with Jinja templating :-)

Help your power users!

Truncate page titles on Builder home page

To avoid wrapping. Maybe can show full title on hover in tooltip in case needed to differentiate between similar titles.

Add option to set target for hyperlinks

E.g. Same window, new window, etc.

Feat: make editor canvas and break points setting accessible

Currently it is not possible to change:

the width of the editor canvas
the breakpoints between desktop/tablet/mobile views

they are fixed predefined values

Add about or info page inside builder to show version of builder

Currently there is no way of checking the installed version of builder inside builder. The only way is to check in frappe cloud on your local bench.

License AGPL?

Remember last font size when editing new block of text

Add more tracking features

Page View (frappe.website.doctype.web_page_view.web_page_view.make_view_log) is already great and a lot of things can be built on top of it through (mere) reports, such as:

And with more integration with the rest of ERPNext, such as revenue data, even:

Multichannel Conversion Attribution

Others would require more analytical record, such as:

Form Analytics — Form Analytics Doctype gathering statistics on Frappe Forms
Media Analytics — Media Analytics Doctype gathering statistics on HTML5 video or audio tags

Other than that, typical tracking events, in addition to Page View, are CheckoutItems, Checkout (i.e. typically the definition of a "conversion"). See for example this matomo help article for a good enough hands-on understanding of tracking events.

These events are also very relevant for the so called Conversion API s of this world (Meta, TikTok, Google, Microsoft) which they use to increase the effectiveness of marketing campaigns via AI-backed continuous improvement models.

A Page Analytics Event could catch these whenever the user defines something like this on the respective action (e.g. click event of a button):

// entire thing automatically seeded in the builder UI?
frappe.call("frappe.website.doctype.web_page_event.web_page_event.make_event_log", {
        name: this.analytics_event_name, // automatically seeded in the builder UI?
	referrer: document.referrer,
	browser: browser.name,
	version: browser.version,
	user_tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
	source: query_params.source,
	medium: query_params.medium,
	campaign: query_params.campaign,
	visitor_id: result.visitorId,
	... // maybe more
})

On the backend, a combined Analytics Settings could then manage the mappings of the available event data to the various Conversions API (Meta, TikTok, etc), as well as the credentials to push these data points to the campaign platform for AI-based campaign self-improvement.

I think that's a viable, out-of-current-builder-capability perspective and gameplan on how to bring this feature on-par quickly and cheaply with some of the industry leaders (such as Matomo or Google Analytics 4 / Google Tag Manager with server-side tagging). All the pieces are already in place, just needs connecting them.

cc @rmehta

Disable double clicking to edit component

Double clicking on a text component ideally should only let you edit the text, which is currently possible by double clicking with an interval. If double clicking quickly, it opens the component editor instead. Maybe editing a component should only possible from the right-click context menu and not double clicks.

Setting a background image also sets bgcolor to image

If setting a color in bgcolor after selecting background, the image is removed. Ideally, one should be able to set both, a bgimage and bgcolor.

Screen.Recording.2023-12-04.at.13.48.55.mov

[bug] Unsetting border colour should also clear border size (1px)

If I want to unset the border by clearing the colour, the size is set, but hidden. Either the size should remain visible or should automatically clear.