{"id":78,"date":"2026-05-23T11:04:24","date_gmt":"2026-05-23T11:04:24","guid":{"rendered":"https:\/\/wordpress.stackmediavps2.com\/?page_id=78"},"modified":"2026-05-23T11:05:13","modified_gmt":"2026-05-23T11:05:13","slug":"alpine-test-editor","status":"publish","type":"page","link":"https:\/\/wordpress.stackmediavps2.com\/index.php\/alpine-test-editor\/","title":{"rendered":"Alpine Test Editor"},"content":{"rendered":"<nav x-data=\"{\r\n        navigationMenuOpen: false,\r\n        navigationMenu: '',\r\n        navigationMenuCloseDelay: 200,\r\n        navigationMenuCloseTimeout: null,\r\n        navigationMenuLeave() {\r\n            let that = this;\r\n            this.navigationMenuCloseTimeout = setTimeout(() => {\r\n                that.navigationMenuClose();\r\n            }, this.navigationMenuCloseDelay);\r\n        },\r\n        navigationMenuReposition(navElement) {\r\n            this.navigationMenuClearCloseTimeout();\r\n            this.$refs.navigationDropdown.style.left = navElement.offsetLeft + &#8216;px&#8217;;\r\n            this.$refs.navigationDropdown.style.marginLeft = (navElement.offsetWidth\/2) + &#8216;px&#8217;;\r\n        },\r\n        navigationMenuClearCloseTimeout(){\r\n            clearTimeout(this.navigationMenuCloseTimeout);\r\n        },\r\n        navigationMenuClose(){\r\n            this.navigationMenuOpen = false;\r\n            this.navigationMenu = &#8221;;\r\n        }\r\n    }&#8221;\r\n    class=&#8221;relative z-10 w-auto&#8221;>\r\n    <div class=\"relative\">\r\n        <ul class=\"flex flex-1 justify-center items-center p-1 space-x-1 list-none rounded-md border text-neutral-700 group border-neutral-200\/80\">\r\n            <li>\r\n                <button\r\n                    :class=\"{ 'bg-neutral-100' : navigationMenu=='getting-started', 'hover:bg-neutral-100' : navigationMenu!='getting-started' }\" @mouseover=\"navigationMenuOpen=true; navigationMenuReposition($el); navigationMenu='getting-started'\" @mouseleave=\"navigationMenuLeave()\" class=\"inline-flex justify-center items-center px-4 py-2 w-max h-10 text-sm font-medium rounded-md transition-colors hover:text-neutral-900 focus:outline-none disabled:opacity-50 disabled:pointer-events-none group\">\r\n                    <span>Getting started<\/span> \r\n                    <svg :class=\"{ '-rotate-180' : navigationMenuOpen==true &#038;&#038; navigationMenu == 'getting-started' }\" class=\"relative top-[1px] ml-1 h-3 w-3 ease-out duration-300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\r\n                <\/button>\r\n            <\/li>\r\n            <li>\r\n                <button \r\n                    :class=\"{ 'bg-neutral-100' : navigationMenu=='learn-more', 'hover:bg-neutral-100' : navigationMenu!='learn-more' }\" @mouseover=\"navigationMenuOpen=true; navigationMenuReposition($el); navigationMenu='learn-more'\" @mouseleave=\"navigationMenuLeave()\" class=\"inline-flex justify-center items-center px-4 py-2 w-max h-10 text-sm font-medium rounded-md transition-colors hover:text-neutral-900 focus:outline-none disabled:opacity-50 disabled:pointer-events-none bg-background hover:bg-neutral-100 group\">\r\n                    <span>Learn More<\/span>\r\n                    <svg :class=\"{ '-rotate-180' : navigationMenuOpen==true &#038;&#038; navigationMenu == 'learn-more' }\" class=\"relative top-[1px] ml-1 h-3 w-3 ease-out duration-300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\r\n                <\/button>\r\n            <\/li>\r\n            <li>\r\n                <a href=\"#_\" class=\"inline-flex justify-center items-center px-4 py-2 w-max h-10 text-sm font-medium rounded-md transition-colors hover:text-neutral-900 focus:outline-none disabled:opacity-50 disabled:pointer-events-none bg-background hover:bg-neutral-100 group\">\r\n                    Documentation\r\n                <\/a>\r\n            <\/li>\r\n        <\/ul>\r\n    <\/div>\r\n    <div x-ref=\"navigationDropdown\" x-show=\"navigationMenuOpen\"\r\n        x-transition:enter=\"transition ease-out duration-100\"\r\n        x-transition:enter-start=\"opacity-0 scale-90\"\r\n        x-transition:enter-end=\"opacity-100 scale-100\"\r\n        x-transition:leave=\"transition ease-in duration-100\"\r\n        x-transition:leave-start=\"opacity-100 scale-100\"\r\n        x-transition:leave-end=\"opacity-0 scale-90\"\r\n        @mouseover=\"navigationMenuClearCloseTimeout()\" @mouseleave=\"navigationMenuLeave()\"\r\n        class=\"absolute top-0 pt-3 duration-200 ease-out -translate-x-1\/2 translate-y-11\" x-cloak>\r\n\r\n        <div class=\"flex overflow-hidden justify-center w-auto h-auto bg-white rounded-md border shadow-sm border-neutral-200\/70\">\r\n\r\n            <div x-show=\"navigationMenu == 'getting-started'\" class=\"flex gap-x-3 justify-center items-stretch p-6 w-full max-w-2xl\">\r\n                <div class=\"flex-shrink-0 pt-28 pb-7 w-48 bg-gradient-to-br to-black rounded from-neutral-800\">\r\n                    <div class=\"relative px-7 space-y-1.5 text-white\">\r\n                        <svg class=\"block w-auto h-9\" viewBox=\"0 0 180 180\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M67.683 89.217h44.634l30.9 53.218H36.783l30.9-53.218Z\" fill=\"currentColor\"\/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M77.478 120.522h21.913v46.956H77.478v-46.956Zm-34.434-29.74 45.59-78.26 46.757 78.26H43.044Z\" fill=\"currentColor\"\/><\/svg>\r\n                        <span class=\"block font-bold\">Pines UI<\/span>\r\n                        <span class=\"block text-sm opacity-60\">An Alpine and Tailwind UI library<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"w-72\">\r\n                    <a href=\"#_\" @click=\"navigationMenuClose()\" class=\"block px-3.5 py-3 text-sm rounded hover:bg-neutral-100\">\r\n                        <span class=\"block mb-1 font-medium text-black\">Introduction<\/span>\r\n                        <span class=\"block font-light leading-5 opacity-50\">Re-usable elements built using Alpine JS and Tailwind CSS.<\/span>\r\n                    <\/a>\r\n                    <a href=\"#_\" @click=\"navigationMenuClose()\" class=\"block px-3.5 py-3 text-sm rounded hover:bg-neutral-100\">\r\n                        <span class=\"block mb-1 font-medium text-black\">How to use<\/span>\r\n                        <span class=\"block leading-5 opacity-50\">Couldn&#8217;t be easier. It is as simple as copy, paste, and preview.<\/span>\r\n                    <\/a>\r\n                    <a href=\"#_\" @click=\"navigationMenuClose()\" class=\"block px-3.5 py-3 text-sm rounded hover:bg-neutral-100\">\r\n                        <span class=\"block mb-1 font-medium text-black\">Contributing<\/span>\r\n                        <span class=\"block leading-5 opacity-50\">Feel free to contribute your expertise. All these elements are open-source.<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            <div x-show=\"navigationMenu == 'learn-more'\" class=\"flex justify-center items-stretch p-6 w-full\">\r\n                <div class=\"w-72\">\r\n                    <a href=\"#_\" @click=\"navigationMenuClose()\" class=\"block px-3.5 py-3 text-sm rounded hover:bg-neutral-100\">\r\n                        <span class=\"block mb-1 font-medium text-black\">Tailwind CSS<\/span>\r\n                        <span class=\"block font-light leading-5 opacity-50\">A utility first CSS framework for building amazing websites.<\/span>\r\n                    <\/a>\r\n                    <a href=\"#_\" @click=\"navigationMenuClose()\" class=\"block px-3.5 py-3 text-sm rounded hover:bg-neutral-100\">\r\n                        <span class=\"block mb-1 font-medium text-black\">Laravel<\/span>\r\n                        <span class=\"block font-light leading-5 opacity-50\">The perfect all-in-one framework for building amazing apps.<\/span>\r\n                    <\/a>\r\n                    <a href=\"#_\" @click=\"navigationMenuClose()\" class=\"block px-3.5 py-3 text-sm rounded hover:bg-neutral-100\">\r\n                        <span class=\"block mb-1 font-medium text-black\">Pines UI<\/span>\r\n                        <span class=\"block leading-5 opacity-50\">An Alpine JS and Tailwind CSS UI library for awesome people. <\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                <div class=\"w-72\">\r\n                    <a href=\"#_\" @click=\"navigationMenuClose()\" class=\"block px-3.5 py-3 text-sm rounded hover:bg-neutral-100\">\r\n                        <span class=\"block mb-1 font-medium text-black\">AlpineJS<\/span>\r\n                        <span class=\"block font-light leading-5 opacity-50\">A framework without the complex setup or heavy dependencies.<\/span>\r\n                    <\/a>\r\n                    <a href=\"#_\" @click=\"navigationMenuClose()\" class=\"block px-3.5 py-3 text-sm rounded hover:bg-neutral-100\">\r\n                        <span class=\"block mb-1 font-medium text-black\">Livewire<\/span>\r\n                        <span class=\"block leading-5 opacity-50\">A seamless integration of server-side and client-side interactions.<\/span>\r\n                    <\/a>\r\n                    <a href=\"#_\" @click=\"navigationMenuClose()\" class=\"block px-3.5 py-3 text-sm rounded hover:bg-neutral-100\">\r\n                        <span class=\"block mb-1 font-medium text-black\">Tails<\/span>\r\n                        <span class=\"block leading-5 opacity-50\">The ultimate Tailwind CSS design tool that helps you craft beautiful websites.<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n        \r\n        <\/div>\r\n    <\/div>\r\n<\/nav>\r\n\r\n<div x-data=\"{ \r\n        slideOverOpen: false \r\n    }\"\r\n    class=\"relative z-50 w-auto h-auto\">\r\n    <button @click=\"slideOverOpen=true\" class=\"inline-flex justify-center items-center px-4 py-2 h-10 text-sm font-medium bg-white rounded-md border transition-colors hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-neutral-200\/60 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none\">Open<\/button>\r\n    <template x-teleport=\"body\">\r\n        <div \r\n            x-show=\"slideOverOpen\"\r\n            @keydown.window.escape=\"slideOverOpen=false\"\r\n            class=\"relative z-[99]\">\r\n            <div x-show=\"slideOverOpen\" x-transition.opacity.duration.600ms @click=\"slideOverOpen = false\" class=\"fixed inset-0 bg-black\/10\"><\/div>\r\n            <div class=\"overflow-hidden fixed inset-0\">\r\n                <div class=\"overflow-hidden absolute inset-0\">\r\n                    <!-- Remove the pt-11 from the element below, this was needed only for the demo -->\r\n                    <div class=\"flex fixed inset-y-0 right-0 pt-11 pl-10 max-w-full\">\r\n                        <div \r\n                            x-show=\"slideOverOpen\" \r\n                            @click.away=\"slideOverOpen = false\"\r\n                            x-transition:enter=\"transform transition ease-in-out duration-500 sm:duration-700\" \r\n                            x-transition:enter-start=\"translate-x-full\" \r\n                            x-transition:enter-end=\"translate-x-0\" \r\n                            x-transition:leave=\"transform transition ease-in-out duration-500 sm:duration-700\" \r\n                            x-transition:leave-start=\"translate-x-0\" \r\n                            x-transition:leave-end=\"translate-x-full\" \r\n                            class=\"w-screen max-w-md\">\r\n                            <div class=\"flex overflow-y-scroll flex-col py-5 h-full bg-white border-l shadow-lg border-neutral-100\/70\">\r\n                                <div class=\"px-4 sm:px-5\">\r\n                                    <div class=\"flex justify-between items-start pb-1\">\r\n                                        <h2 class=\"text-base font-semibold leading-6 text-gray-900\" id=\"slide-over-title\">Slide Over Title<\/h2>\r\n                                        <div class=\"flex items-center ml-3 h-auto\"> \r\n                                            <button @click=\"slideOverOpen=false\" class=\"flex absolute right-0 z-30 justify-center items-center px-3 py-2 mt-6 mr-5 space-x-1 text-xs font-medium uppercase rounded-md border border-neutral-200 text-neutral-600 hover:bg-neutral-100\">\r\n                                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-4 h-4\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>\r\n                                                <span>Close<\/span>\r\n                                            <\/button>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"relative flex-1 px-4 mt-5 sm:px-5\">\r\n                                    <div class=\"absolute inset-0 px-4 sm:px-5\">\r\n                                        <div class=\"overflow-hidden relative h-full rounded-md border border-dashed border-neutral-300\"><\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/template>\r\n<\/div>\r\n\r\n\r\n\r\n<div \r\n    x-data=\"{\r\n        text: '',\r\n        textArray : ['Alpine JS is Amazing', 'It is Truly Awesome!', 'You Have to Try It!'],\r\n        textIndex: 0,\r\n        charIndex: 0,\r\n        typeSpeed: 110,\r\n        cursorSpeed: 550,\r\n        pauseEnd: 1500,\r\n        pauseStart: 20,\r\n        direction: 'forward',\r\n    }\" \r\n    x-init=\"$nextTick(() => {\r\n        let typingInterval = setInterval(startTyping, $data.typeSpeed);\r\n    \r\n        function startTyping(){\r\n            let current = $data.textArray[ $data.textIndex ];\r\n            \r\n            \/\/ check to see if we hit the end of the string\r\n            if($data.charIndex > current.length){\r\n                    $data.direction = &#8216;backward&#8217;;\r\n                    clearInterval(typingInterval);\r\n                    \r\n                    setTimeout(function(){\r\n                        typingInterval = setInterval(startTyping, $data.typeSpeed);\r\n                    }, $data.pauseEnd);\r\n            }   \r\n                \r\n            $data.text = current.substring(0, $data.charIndex);\r\n            \r\n            if($data.direction == &#8216;forward&#8217;)\r\n            {\r\n                $data.charIndex += 1;\r\n            } \r\n            else \r\n            {\r\n                if($data.charIndex == 0)\r\n                {\r\n                    $data.direction = &#8216;forward&#8217;;\r\n                    clearInterval(typingInterval);\r\n                    setTimeout(function(){\r\n                        $data.textIndex += 1;\r\n                        if($data.textIndex >= $data.textArray.length)\r\n                        {\r\n                            $data.textIndex = 0;\r\n                        }\r\n                        typingInterval = setInterval(startTyping, $data.typeSpeed);\r\n                    }, $data.pauseStart);\r\n                }\r\n                $data.charIndex -= 1;\r\n            }\r\n        }\r\n                    \r\n        setInterval(function(){\r\n            if($refs.cursor.classList.contains(&#8216;hidden&#8217;))\r\n            {\r\n                $refs.cursor.classList.remove(&#8216;hidden&#8217;);\r\n            } \r\n            else \r\n            {\r\n                $refs.cursor.classList.add(&#8216;hidden&#8217;);\r\n            }\r\n        }, $data.cursorSpeed);\r\n\r\n    })&#8221;\r\n    class=&#8221;flex items-center justify-center mx-auto text-center max-w-7xl&#8221;>\r\n    <div class=\"relative flex items-center justify-center h-auto\">\r\n        <p class=\"text-2xl font-black leading-tight\" x-text=\"text\"><\/p>\r\n        <span class=\"absolute right-0 w-2 -mr-2 bg-black h-3\/4\" x-ref=\"cursor\"><\/span>\r\n    <\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_seopress_analysis_target_kw":"","footnotes":""},"class_list":["post-78","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wordpress.stackmediavps2.com\/index.php\/wp-json\/wp\/v2\/pages\/78","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.stackmediavps2.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wordpress.stackmediavps2.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.stackmediavps2.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.stackmediavps2.com\/index.php\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.stackmediavps2.com\/index.php\/wp-json\/wp\/v2\/pages\/78\/revisions"}],"predecessor-version":[{"id":80,"href":"https:\/\/wordpress.stackmediavps2.com\/index.php\/wp-json\/wp\/v2\/pages\/78\/revisions\/80"}],"wp:attachment":[{"href":"https:\/\/wordpress.stackmediavps2.com\/index.php\/wp-json\/wp\/v2\/media?parent=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}